/* ===== UI หน้าต่างเกม (HTML ซ้อนบนแคนวาส) ===== */
#ui-layer {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  --bg-deep: #0d1118;
  --bg-panel: #151b26;
  --bg-cell: #0e131b;
  --line-gold: #8a6a32;
  --gold: #e3c36f;
  --text: #e8e6df;
  --text-dim: #8d95a3;
  --stat-blue: #16304d;
  --ok: #2c6a3a;
  --info: #2a4370;
  --danger: #74282c;
  font-family: "Noto Sans Thai", "Sarabun", "Leelawadee UI", system-ui, sans-serif;
}

#ui-layer .win {
  pointer-events: auto; touch-action: manipulation;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(96%, 780px); height: min(94%, 400px);
  display: none; flex-direction: column; box-sizing: border-box;
  color: var(--text); font-size: 12px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-deep));
  border: 2px solid var(--line-gold); border-radius: 10px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(227, 195, 111, .18), 0 10px 40px rgba(0, 0, 0, .7);
  -webkit-user-select: none; user-select: none;
}
#ui-layer .win button { font-family: inherit; cursor: pointer; }

/* หัวหน้าต่าง + แท็บ */
.win-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 4px; }
.win-title { font-size: 15px; font-weight: 700; color: var(--gold); }
.win-x {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid #3a4150;
  background: #1c2230; color: var(--text); font-size: 14px; line-height: 1;
}
.win-tabs { display: flex; gap: 4px; padding: 0 10px 6px; border-bottom: 1px solid #2a3142; }
.win-tab {
  padding: 5px 14px; border-radius: 6px 6px 0 0; border: 1px solid #2a3142; border-bottom: 0;
  background: #121722; color: var(--text-dim); font-size: 12px;
}
.win-tab.on { background: #2a2418; color: var(--gold); border-color: var(--line-gold); }
.win-tabs .spacer { flex: 1; }
.win-tab.act { background: #22304a; color: #bcd6ff; border-color: #34507f; border-radius: 6px; margin-bottom: 4px; }

/* เนื้อหา */
.win-body { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px 10px; }
.win-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.win-right {
  flex: 0 0 36%; min-width: 190px; overflow-y: auto; touch-action: pan-y;
  background: #10151e; border: 1px solid #2a3142; border-radius: 8px; padding: 8px;
}

/* ตารางช่อง */
.grid { flex: 1; min-height: 0; display: grid; gap: 3px; justify-content: center; align-content: start; }
.grid.bag { grid-template-columns: repeat(10, minmax(0, 22px)); grid-template-rows: repeat(5, minmax(0, 22px)); gap: 3px; }
.grid.equip { grid-template-columns: repeat(4, minmax(0, 64px)); grid-template-rows: repeat(2, minmax(0, 64px)); gap: 6px; }
.cell {
  position: relative; padding: 0; overflow: hidden; border-radius: 5px;
  background: var(--bg-cell); border: 2px solid #1d2431; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.cell.has { border-color: var(--c, #9a9a9a); background: #181e2a; }
.cell.sel { box-shadow: 0 0 0 2px var(--gold); }
.cell img { width: 66%; height: 66%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.grid.bag .cell { border-width: 1px; border-radius: 4px; }
.grid.bag .cell img { width: 76%; height: 76%; }
.grid.bag .cell .lv { font-size: 5px; }
.grid.bag .cell .cnt { font-size: 7px; }
.cell .lv { position: absolute; left: 1px; bottom: 0; font-size: 7px; line-height: 1; color: var(--gold); text-shadow: 0 0 2px #000, 0 0 2px #000; }
.cell .cnt { position: absolute; right: 2px; bottom: 1px; font-size: 9px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.cell .slot-name { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 9px; color: var(--text-dim); }
.grid.equip .cell img { width: 52%; height: 52%; margin-top: 8px; }
.grid.equip .cell:not(.has) img { opacity: .3; }
.grid.equip .cell .lv { font-size: 10px; left: 0; right: 0; text-align: center; bottom: 3px; }

/* แถบเลขหน้า */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pager button, .btn {
  border: 1px solid #3a4150; background: #1c2230; color: var(--text); border-radius: 6px; padding: 5px 10px; font-size: 12px;
}
.pager .page-no { min-width: 70px; text-align: center; color: var(--text-dim); }

/* รายละเอียดไอเทม */
.d-empty { color: var(--text-dim); text-align: center; padding: 28px 6px; line-height: 1.6; }
.d-top { display: flex; gap: 8px; align-items: center; }
.d-icon {
  flex: 0 0 52px; height: 52px; border-radius: 8px; border: 2px solid var(--c, #9a9a9a); background: #0a0d13;
  display: flex; align-items: center; justify-content: center;
}
.d-icon img { width: 36px; height: 36px; image-rendering: pixelated; }
.d-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.d-type { font-size: 11px; color: var(--c, #9a9a9a); margin-top: 2px; }
.d-stats { margin: 8px 0; padding: 6px 8px; border-radius: 6px; background: var(--stat-blue); color: #bfe3ff; line-height: 1.6; }
.d-stats div { display: flex; justify-content: space-between; }
.d-note { margin: 8px 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.d-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #1e2533; font-size: 11px; }
.d-row span:first-child { color: var(--text-dim); }
.d-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.d-actions .btn { flex: 1 1 45%; padding: 8px 4px; font-weight: 600; }
.btn.ok { background: var(--ok); border-color: #3f8d51; }
.btn.info { background: var(--info); border-color: #3f66a8; }
.btn.danger { background: var(--danger); border-color: #a4383d; }

/* ท้ายหน้าต่าง */
.win-foot {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-top: 1px solid #2a3142;
  color: var(--text-dim); font-size: 11px;
}
.win-foot .gold { color: var(--gold); font-weight: 700; font-size: 12px; }
.win-foot .msg { flex: 1; text-align: right; color: #bfe3ff; min-height: 1em; }

/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 340px) {
  #ui-layer .win { height: 98%; font-size: 11px; }
  .win-head { padding: 3px 8px 2px; }
  .win-title { font-size: 13px; }
  .win-x { width: 24px; height: 24px; }
  .win-body { padding: 5px 8px; }
  .d-actions .btn { padding: 6px 4px; }
}