/* การ์ดรายละเอียดไอเทมแบบลอย (item-card.js) — กระดาษครีม ขอบทอง มุมมน (ไม่มีใบไม้ประดับ — ผู้ใช้เลือก 27 ก.ย.)
   สีชุดเดียวกับหน้าต่างเควสวันนี้ (style.css .qd-*) · ปุ่มใช้ได้ = เขียว (แถบเควส) · หัวข้อ = น้ำตาลทอง
   ⚠️ ไม่ใช่หน้าต่าง (.win) — ไม่ผ่านระบบลาก/ซ้อนหน้าต่าง จึงอยู่เหนือทุกหน้าต่างด้วย z-index ของตัวเอง */

.icard {
  --ic-ink: #4a3520; --ic-mute: #7a6548; --ic-line: #e3d2a8; --ic-gold: #e8b64a; --ic-head: #8a5a12;
  position: fixed; z-index: 9000; width: 344px; max-width: calc(100vw - 20px);
  max-height: min(620px, calc(100vh - 20px)); display: flex; flex-direction: column;
  box-sizing: border-box; border-radius: 16px; border: 2px solid #d9b56a;
  background: linear-gradient(#fffaf0, #f8eed8);
  box-shadow: 0 0 0 1px #fff8 inset, 0 0 0 4px #f3e3bd, 0 0 0 5px #caa45e, 0 10px 26px rgba(70, 45, 10, .32);
  color: var(--ic-ink); font-family: var(--font, inherit); font-size: 14px; line-height: 1.4;
  animation: ic-in .14s ease-out;
}
@keyframes ic-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.icard .ic-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 10px; scrollbar-width: thin; scrollbar-color: #caa45e #f3e8d0; }

/* สามเหลี่ยมชี้ไปที่ไอคอนที่ถูกคลิก — data-side = ฝั่งของการ์ดที่ติดไอคอน */
.icard .ic-ptr { position: absolute; width: 16px; height: 16px; background: #fffaf0; border: 2px solid #d9b56a; transform: rotate(45deg); display: none; }
.icard[data-side="l"] .ic-ptr { display: block; left: -11px; border-top: 0; border-right: 0; }
.icard[data-side="r"] .ic-ptr { display: block; right: -11px; border-bottom: 0; border-left: 0; }
.icard[data-side="t"] .ic-ptr { display: block; top: -11px; border-bottom: 0; border-right: 0; }
.icard[data-side="b"] .ic-ptr { display: block; bottom: -11px; border-top: 0; border-left: 0; background: #f8eed8; }

/* ── หัว: ไอคอนใหญ่ · ชื่อ · ป้ายความหายาก · ประเภท ───────────────── */
.icard .ic-head { display: grid; grid-template-columns: 72px 1fr 28px; gap: 12px; align-items: center; }
.icard .ic-icon { width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; font-size: 38px;
  border: 2px solid #d8c49a; background: radial-gradient(circle at 50% 40%, #fffdf6, #efe2c4); box-shadow: inset 0 -3px 0 #0000000f; }
.icard .ic-icon img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60, 40, 10, .25)); }
.icard .ic-title { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.icard .ic-title b { font: 700 19px/1.2 var(--font-head, inherit); color: #3e2c16; overflow-wrap: anywhere; }
.icard .ic-title small { font-size: 13px; color: var(--ic-mute); }
.icard .ic-rar { padding: 1px 10px; border-radius: 999px; font: 700 13px/1.5 var(--font-head, inherit); color: #fff; background: #8f8a80; }
.icard .ic-x { align-self: start; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid #d8c49a;
  background: linear-gradient(#fffcf3, #ecddbc); color: #6b5438; font: 700 18px/1 inherit; cursor: pointer; }
.icard .ic-x:hover { background: #fff6e0; border-color: #9a7736; }

/* ความหายาก — ฟ้า/ม่วง/ทองตรงกับแสงของบนพื้น (loot.js LOOT) · กรอบไอคอนย้อมอ่อน ๆ ตาม */
.icard .ic-rar.r-uncommon { background: #5cae57; }
.icard .ic-rar.r-good { background: #2f8ae0; }
.icard .ic-rar.r-rare { background: #3f78d6; }
.icard .ic-rar.r-epic { background: #9a4ae8; }
.icard .ic-rar.r-legend { background: linear-gradient(#f2c14e, #d99a26); color: #4a3008; }
.icard .ic-rar.r-style { background: #2f6f73; }
.icard .ic-icon.r-uncommon { border-color: #9fd08f; background: radial-gradient(circle at 50% 40%, #fbfff4, #dcefcf); }
.icard .ic-icon.r-good, .icard .ic-icon.r-rare { border-color: #8fbdf0; background: radial-gradient(circle at 50% 40%, #f6fbff, #d3e5f8); }
.icard .ic-icon.r-epic { border-color: #c29af0; background: radial-gradient(circle at 50% 40%, #fbf6ff, #e6d6f8); }
.icard .ic-icon.r-legend { border-color: #e8b64a; background: radial-gradient(circle at 50% 40%, #fffbea, #f6e0a8); }
.icard .ic-icon.r-style { border-color: #8cc0c0; background: radial-gradient(circle at 50% 40%, #f5fdfc, #d5ecea); }

.icard .ic-desc { margin: 10px 0 2px; font-size: 14px; line-height: 1.5; color: #4a3a26; }
.icard .ic-muted { margin: 4px 0; font-size: 13px; color: var(--ic-mute); }

/* ค่าพลังอุปกรณ์ — ชิปสองคอลัมน์ */
.icard .ic-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 10px 0 0; }
.icard .ic-stat { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 7px; background: #f3e8cf; font-size: 13px; }
.icard .ic-stat i { font-style: normal; color: var(--ic-mute); }
.icard .ic-stat b { color: #2f7a3c; font-variant-numeric: tabular-nums; }
.icard .ic-req { margin: 6px 0 0; font-size: 13px; color: var(--ic-mute); }
.icard .ic-req i { font-style: normal; margin: 0 5px; opacity: .6; }
.icard .ic-req .bad { color: #c0392b; font-weight: 700; }
.icard .ic-cards { margin: 4px 0 0; font-size: 13px; color: #6b4a14; }

/* ── หัวข้อส่วน: แถบครีมเข้ม + เพชรทองหน้าหัวข้อ ───────────────────── */
.icard .ic-sec { margin-top: 10px; }
.icard .ic-sec h5 { margin: 0 0 4px; padding: 3px 10px 3px 22px; position: relative; border-radius: 8px;
  background: linear-gradient(90deg, #f1e2bf, #f8efdb 80%, transparent); font: 700 14px/1.4 var(--font-head, inherit); color: #6b4a14; }
.icard .ic-sec h5::before { content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  background: #c8932e; transform: rotate(45deg); border-radius: 1px; }

.icard svg { width: 16px; height: 16px; fill: none; stroke: #b9862c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.icard .ic-info { list-style: none; margin: 0; padding: 0 4px; }
.icard .ic-info li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; padding: 4px 4px; border-bottom: 1px dashed #eadcba; font-size: 14px; }
.icard .ic-info li:last-child { border-bottom: 0; }
.icard .ic-info li > span:nth-child(2) { color: #5a4630; }
.icard .ic-info b { font-weight: 700; color: #3e2c16; font-variant-numeric: tabular-nums; }
.icard .ic-info b small { font-weight: 400; color: var(--ic-mute); }
.icard .ic-info b.warn { color: #a8562a; }
.icard .ic-info b.mute { color: var(--ic-mute); font-weight: 600; }
.icard .ic-info b.ok { color: #2f7a3c; }
.icard .ic-ri { display: grid; place-items: center; }

/* แถวแหล่งที่มา/ที่ใช้ — แถวที่พาไปได้กดได้ทั้งแถว (มี ›) · หรือมีปุ่ม "ไปยัง…" */
.icard .ic-list { list-style: none; margin: 0; padding: 0; }
.icard .ic-list li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 9px; }
.icard .ic-list li + li { border-top: 1px solid #efe3c8; }
.icard .ic-list li.go { cursor: pointer; }
.icard .ic-list li.go:hover, .icard .ic-list li.go:focus-visible { background: #fbf1d8; outline: none; }
.icard .ic-li { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fbf0d4; border: 1.5px solid #e2c585; }
.icard .ic-lt { min-width: 0; display: flex; flex-direction: column; }
.icard .ic-lt b { font-weight: 600; font-size: 14px; color: #3e2c16; }
.icard .ic-lt b small { font-weight: 400; color: var(--ic-mute); }
.icard .ic-lt > small { font-size: 13px; color: var(--ic-mute); line-height: 1.35; }
.icard .ic-chev { font: 700 20px/1 inherit; font-style: normal; color: #b9862c; padding: 0 2px; }
.icard .ic-go { flex: none; padding: 5px 10px; border-radius: 9px; border: 1px solid #d8c49a; cursor: pointer;
  background: linear-gradient(#fffcf3, #ecddbc); color: #5a4020; font: 600 13px/1.3 inherit; white-space: nowrap; }
.icard .ic-go:hover { background: #fff6e0; border-color: #9a7736; }

/* ── ปุ่มล่าง ───────────────────────────────────────────────────── */
.icard .ic-acts { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--ic-line); }
.icard .ic-acts button { flex: 1; min-height: 38px; border-radius: 12px; border: 1px solid #d8c49a; cursor: pointer;
  background: linear-gradient(#fffcf3, #ecddbc); color: #5a4020; font: 700 15px/1.2 var(--font-head, inherit); }
.icard .ic-acts button.main { border-color: #3d8a45; color: #fff; text-shadow: 0 1px 1px #1d4a2355;
  background: linear-gradient(#72c46a, #479a44); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #357a37; }
.icard .ic-acts button.main:hover { filter: brightness(1.05); }

/* จอแคบ (มือถือตั้ง): กลางล่าง ไม่มีสามเหลี่ยม · สูงไม่เกิน ~72% ให้ยังเห็นเกมข้างหลัง */
.icard.ic-sheet { width: min(360px, calc(100vw - 20px)); max-height: min(620px, 72vh); }
/* ปุ่มบนจอสัมผัสถูกกฎรวมขยายเป็น 44px+ — การ์ดคุมขนาดปุ่มของตัวเอง */
html body .icard button.ic-x { min-width: 0; min-height: 0; width: 34px; height: 34px; padding: 0; font-size: 20px; }
html body .icard button.ic-go { min-height: 0; }
.icard.ic-sheet .ic-ptr { display: none !important; }
@media (max-height: 520px) {
  .icard { max-height: calc(100vh - 16px); }
  .icard .ic-head { grid-template-columns: 56px 1fr 28px; }
  .icard .ic-icon { width: 56px; height: 56px; }
  .icard .ic-icon img { width: 46px; height: 46px; }
}

/* ไอคอนที่เปิดการ์ดได้ — บอกด้วยเคอร์เซอร์ ไม่แต่งเพิ่ม (หน้าจอเดิมมีกรอบของตัวเองอยู่แล้ว) */
[data-icard]:not([data-icard-rc]) { cursor: pointer; }

/* ช่องฝังตรา (การ์ดไอเทม) */
.icard .ic-sockets { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: #f6edd6; }
.icard .ic-sockets h5 { margin: 0 0 3px; font-size: 13px; color: #6b4a14; }
.icard .ic-sockets p { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; font-size: 13px; color: #8a7a58; }
.icard .ic-sockets p.on { color: #2d2a24; }
.icard .ic-sockets i { font-style: normal; color: #b8a67a; }
.icard .ic-sockets p.on i { color: #e8b64a; }
.icard .ic-sockets small { display: block; font-size: 12px; color: #6b5a38; font-weight: 400; }
/* ป๊อปอัปเลือกอุปกรณ์ที่จะฝังตรา */
.sock-sheet { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 2px solid #e8b64a; border-radius: 16px; background: #fbf4e2; color: #2d2a24; overflow: hidden; }
.sock-sheet[open] { display: flex; flex-direction: column; }
.sock-sheet .sk-head { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid #e3d3a8; }
.sock-sheet .sk-head > div { flex: 1; min-width: 0; }
.sock-sheet .sk-head b, .sock-sheet .sk-head strong, .sock-sheet .sk-head small { display: block; }
.sock-sheet .sk-head small { font-size: 12px; color: #6b5a38; margin-top: 2px; }
.sock-sheet .sk-ic, .sock-sheet .sk-gi { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid #e3d3a8; }
.sock-sheet .sk-x { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #d8c49a; background: #fff; font-size: 20px; cursor: pointer; }
.sock-sheet .sk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; display: grid; gap: 6px; overscroll-behavior: contain; }
.sock-sheet .sk-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 10px; border-radius: 12px; border: 1px solid #e3d3a8; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sock-sheet .sk-row.on { border: 2px solid #2f6f73; background: #e9f4f1; }
.sock-sheet .sk-nm { flex: 1; min-width: 0; }
.sock-sheet .sk-nm b, .sock-sheet .sk-nm small { display: block; }
.sock-sheet .sk-nm small { font-size: 12px; color: #6b5a38; }
.sock-sheet .sk-pips i { font-style: normal; color: #b8a67a; font-size: 16px; }
.sock-sheet .sk-pips i.on { color: #e8b64a; }
.sock-sheet .sk-row em { font-style: normal; font-size: 12px; color: #6b5a38; min-width: 30px; text-align: right; }
.sock-sheet .sk-rep { padding: 6px 14px; font-size: 13px; }
.sock-sheet .sk-rep div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sock-sheet .sk-rep button { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #d8c49a; background: #fff; cursor: pointer; }
.sock-sheet .sk-rep button.on { border-color: #b3402a; background: #fdeae4; }
.sock-sheet .qp-act { padding: 10px 14px 12px; border-top: 1px solid #e3d3a8; }
.sock-sheet .qp-act button[disabled] { opacity: .5; }
.sock-sheet .qp-act { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.sock-sheet .qp-act button { min-height: 42px; border-radius: 12px; border: 1px solid #d8c49a; background: #fff; font: inherit; cursor: pointer; }
.sock-sheet .qp-act button.main { border-color: #b88a1e; background: linear-gradient(#f4c85c, #e8b64a); color: #3b2a08; font-weight: 700; }

/* ── ตรา: ช่อง ◆◇ · แถวช่องในการ์ดอุปกรณ์ · ป๊อปอัปเลือกตรา (2 ต.ค.) ── */
.sg-pips { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 1; vertical-align: middle; }
.sg-pips i { font-style: normal; color: #b8a67a; }
.sg-pips i.on { color: #e8b64a; text-shadow: 0 0 1px #8a6a1a; }
.sg-pips b { margin-left: 3px; font-size: 11px; color: #6b4a14; }
.eqslot .sg-pips { margin-top: 1px; }
.icard .ic-sockets { padding: 8px 10px; }
.icard .ic-sockets h5 { display: flex; align-items: center; gap: 6px; }
.icard .ic-sockets h5 .sg-pips { margin-left: auto; }
.sg-row, .sg-card { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: #fff; border: 1px solid #e3d3a8; margin: 5px 0; text-align: left; font: inherit; color: #2d2a24; }
.sg-row.on { border-color: #e8b64a; }
.sg-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #fbf4e2; border: 1px solid #e3d3a8; }
.sg-ic .ic3d, .sg-ic img { width: 32px; height: 32px; }
.sg-ic.empty { border-style: dashed; color: #b8a67a; font-size: 20px; background: transparent; }
.sg-nm { flex: 1; min-width: 0; display: block; }
.sg-nm b { display: block; font-size: 14px; }
.sg-nm small { display: block; font-size: 12px; color: #6b5a38; font-weight: 400; }
.sg-effs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sg-eff { padding: 1px 7px; border-radius: 999px; background: #e7f2e0; color: #2f6a2f; font-size: 12px; font-weight: 700; }
.sg-row > button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #d8c49a; background: #fff; font: inherit; font-weight: 700; color: #2f6f73; cursor: pointer; }
.sg-row > button.add { border-color: #b88a1e; background: linear-gradient(#f4c85c, #e8b64a); color: #3b2a08; }
.sg-row > button:active { transform: translateY(1px); }
.sg-total { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: #fbf4e2; border: 1px solid #e3d3a8; }
.sg-total h6, .sg-prev h6 { margin: 0 0 3px; font-size: 13px; color: #6b4a14; }
.sg-total span, .sg-prev > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 1px 0; }
.sg-total i, .sg-prev i { font-style: normal; flex: 1; }
.sg-total b { color: #2f8a3a; }
.sg-total small { display: block; margin-top: 2px; font-size: 11px; color: #8a7a58; }
/* ป๊อปอัปเลือกตรา */
.sock-sheet .sk-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; }
.sock-sheet .sk-body > .sk-list { padding: 0; overflow: visible; }
.sg-picker .sk-head b { display: block; font-size: 16px; }
.sg-sub { display: block; font-size: 12px; color: #6b5a38; }
.sg-cur small { font-size: 12px; color: #6b5a38; }
.sg-card.static { margin-top: 2px; }
.sg-chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.sg-chips button { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #d8c49a; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.sg-chips button.on { background: #2f6f73; border-color: #2f6f73; color: #fff; }
.sg-card { width: 100%; min-height: 56px; cursor: pointer; }
.sg-card.on { border: 2px solid #2f6f73; background: #e9f4f1; }
.sg-radio { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c9b88f; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.sg-card.on .sg-radio { background: #2f8a3a; border-color: #2f8a3a; }
.sg-none { padding: 10px 4px; color: #6b5a38; }
.sg-prev { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #e3d3a8; }
.sg-prev h6 small { font-weight: 400; color: #8a7a58; }
.sg-prev > div span { color: #6b5a38; }
.sg-prev .up b { color: #2f8a3a; }
.sg-prev .down b { color: #c0561f; }
.sg-warn { margin: 6px 0 0; padding: 5px 8px; border-radius: 8px; background: #fdeae4; color: #9a3a1c; font-size: 13px; }
.sg-cta { border-top: 1px solid #e3d3a8; background: #fbf4e2; padding-bottom: env(safe-area-inset-bottom, 0); }
.sg-cta > small { display: block; padding: 6px 14px 0; font-size: 12px; color: #9a3a1c; }
.sg-cta .qp-act { border-top: 0; padding-top: 8px; }
.sg-cta .qp-act button { min-height: 48px; }
/* มือถือ/จอสัมผัส: เต็มจอ ไม่ใช่หน้าต่างลอยเล็ก · ปุ่มยืนยันติดล่าง */
html.touch-ui .sock-sheet { inset: 0; margin: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border-width: 0; }
html.touch-ui .sock-sheet .sk-head { padding-left: max(14px, var(--sa-l, 0px)); padding-right: max(14px, var(--sa-r, 0px)); }
html.touch-ui .sock-sheet .sk-body { padding-left: max(12px, var(--sa-l, 0px)); padding-right: max(12px, var(--sa-r, 0px)); }
html.touch-ui .sock-sheet .qp-act { padding-left: max(14px, var(--sa-l, 0px)); padding-right: max(14px, var(--sa-r, 0px)); }
@media (min-width: 900px) { html.touch-ui .sock-sheet { inset: 0; margin: auto; width: min(520px, 90vw); height: auto; max-height: 86dvh; border-radius: 16px; border-width: 2px; } }
.sock-sheet .sk-row { flex-wrap: nowrap; }
.sock-sheet .sk-row em { flex: none; white-space: nowrap; }
.sock-sheet .sk-row > * { margin: 0; }
html body .sock-sheet .sk-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; }