/* ติดตามวัสดุ (js/track.js, 2026-10-19): the HUD box under the quest box, the item card's best-source bar and 📌, the
   "ขาดอะไรบ้าง" buttons on the pages, and the panels (#trkpop). Obsidian Gold like the quest box; the HUD box sizes in HUD
   units (--u on #ui). The bar and the buttons bring their own dark plate, so they read on every book skin. Crisp text only. */

/* ---- the HUD box ---- */
#trkbox {
  position: fixed; z-index: 2; box-sizing: border-box; width: calc(236px * var(--u));
  display: flex; flex-direction: column; gap: calc(3px * var(--u)); padding: calc(5px * var(--u)) calc(7px * var(--u)) calc(6px * var(--u));
  border-radius: calc(12px * var(--u)); background: rgba(22, 28, 54, 0.9); border: calc(2px * var(--u)) solid #c9a24a;
  box-shadow: 0 0 0 2px #2c2533, inset 0 0 0 1px rgba(255, 230, 160, 0.25), 0 4px 10px rgba(0, 0, 0, 0.35);
  font-family: Mali, Fredoka, sans-serif; color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; pointer-events: auto;
}
#trkbox[hidden] { display: none; }
#trkbox.farming { border-color: #8be37b; }
#trkbox .tb-h { display: flex; align-items: center; gap: calc(5px * var(--u)); padding-bottom: calc(3px * var(--u)); border-bottom: 1px solid rgba(201, 162, 74, 0.45); cursor: grab; }
#trkbox.folded .tb-h { padding-bottom: 0; border-bottom: 0; }
#trkbox .tb-h b { font-size: calc(13px * var(--u)); color: #ffe7a6; white-space: nowrap; }
#trkbox .tb-h small { margin-left: auto; font: 600 calc(11px * var(--u)) Fredoka, Mali, sans-serif; color: #c9b88a; white-space: nowrap; }
#trkbox.farming .tb-h small { color: #c6f08a; }
#trkbox .tb-hb { flex: none; width: calc(20px * var(--u)); height: calc(20px * var(--u)); padding: 0; border: 1px solid rgba(201, 162, 74, 0.6); border-radius: calc(6px * var(--u)); background: rgba(0, 0, 0, 0.3); color: #ffe7a6; font: 700 calc(12px * var(--u))/1 Fredoka, sans-serif; cursor: pointer; }
#trkbox .tb-hb:hover { background: rgba(255, 216, 102, 0.22); }
#trkbox .tb-row { position: relative; display: flex; align-items: center; gap: calc(6px * var(--u)); min-height: calc(30px * var(--u)); padding: calc(2px * var(--u)) calc(4px * var(--u)); border-radius: calc(8px * var(--u)); background: rgba(255, 255, 255, 0.05); cursor: pointer; }
#trkbox .tb-row:hover { background: rgba(255, 216, 102, 0.14); }
#trkbox .tb-row:focus-visible { outline: 2px solid #ffe08a; outline-offset: 1px; }
#trkbox .tb-row.on { background: rgba(139, 227, 123, 0.18); box-shadow: inset 0 0 0 1px rgba(139, 227, 123, 0.6); }
#trkbox .tb-row.done { background: rgba(255, 216, 102, 0.12); }
#trkbox .tb-ic { flex: none; width: calc(26px * var(--u)); height: calc(26px * var(--u)); cursor: help; }
#trkbox .tb-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2px * var(--u)); }
#trkbox .tb-n b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(12px * var(--u)); line-height: 1.2; color: #fff6dc; }
#trkbox .tb-bar { display: block; height: calc(4px * var(--u)); border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
#trkbox .tb-bar u { display: block; height: 100%; text-decoration: none; background: linear-gradient(90deg, #d9a443, #ffe08a); }
#trkbox .tb-row.on .tb-bar u { background: linear-gradient(90deg, #8fcf6a, #c6f08a); }
#trkbox .tb-c { flex: none; font: 700 calc(12px * var(--u)) Fredoka, Mali, sans-serif; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
#trkbox .tb-row.done .tb-c { color: #ffe08a; }
#trkbox .tb-st { flex: none; width: calc(12px * var(--u)); font: 700 calc(11px * var(--u)) Fredoka, sans-serif; font-style: normal; text-align: center; color: #ffd36e; }
#trkbox .tb-row.on .tb-st { color: #8be37b; animation: tbPulse 1.2s ease-in-out infinite; }
@keyframes tbPulse { 50% { opacity: 0.35; } }
#trkbox .tb-x { position: absolute; right: calc(-6px * var(--u)); top: calc(-6px * var(--u)); display: none; width: calc(18px * var(--u)); height: calc(18px * var(--u)); padding: 0; border: 1px solid #c9a24a; border-radius: 50%; background: #1c160e; color: #ffd98a; font: 700 calc(10px * var(--u))/1 sans-serif; cursor: pointer; }
#trkbox .tb-row:hover .tb-x, #trkbox .tb-row:focus-within .tb-x { display: block; }
@media (pointer: coarse) { #trkbox .tb-x { display: none !important; } }   /* (a finger: ✕ lives in the ≡ list) */
#trkbox .tb-more { padding: calc(2px * var(--u)); border: 0; border-radius: calc(6px * var(--u)); background: none; color: #c9b88a; font: 600 calc(11px * var(--u)) Mali, sans-serif; cursor: pointer; }
#trkbox .tb-more:hover { color: #ffe7a6; background: rgba(255, 255, 255, 0.06); }
#trkbox .tb-go { padding: calc(4px * var(--u)) calc(6px * var(--u)); border: 1px solid #ffd866; border-radius: calc(8px * var(--u)); background: linear-gradient(180deg, rgba(255, 216, 102, 0.36), rgba(232, 150, 48, 0.26)); color: #fff4c8; font: 700 calc(12px * var(--u)) Mali, Fredoka, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; animation: tbGo 1.6s ease-in-out infinite; }
#trkbox .tb-go:hover { background: linear-gradient(180deg, rgba(255, 216, 102, 0.55), rgba(232, 150, 48, 0.4)); }
@keyframes tbGo { 50% { box-shadow: 0 0 0 2px rgba(255, 216, 102, 0.45); } }

/* the first-time bubble */
#trk-tut { position: fixed; z-index: 960; width: 236px; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 10px; border-radius: 12px; background: #2a1d0e; border: 2px solid #ffd866; color: #fff4c8; font: 600 12.5px/1.45 Mali, Fredoka, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); pointer-events: auto; }
#trk-tut b { color: #ffd866; font-size: 13.5px; }
#trk-tut button { align-self: flex-end; margin-top: 4px; padding: 3px 12px; border: 1px solid #ffd866; border-radius: 999px; background: rgba(255, 216, 102, 0.2); color: #fff4c8; font: 700 12px Mali, sans-serif; cursor: pointer; }

/* ---- the best source bar (item card, bag page, panels) and 📌 ---- */
.trk-best { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(64, 52, 20, 0.95), rgba(36, 28, 12, 0.95)); box-shadow: inset 0 0 0 1.5px rgba(255, 216, 102, 0.75); color: #f6ecd2; font-family: Mali, sans-serif; text-align: left; }
.trk-best.risk { box-shadow: inset 0 0 0 1.5px rgba(255, 150, 90, 0.8); }
.trk-best .tbb-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trk-best .tbb-l > b { font: 800 0.8rem/1.2 Mali, sans-serif; color: #ffd866; }
.trk-best .tbb-m { font: 700 0.98rem/1.3 Mali, sans-serif; color: #fff6dc; }
.trk-best .tbb-m i { font: 600 0.78rem Fredoka, Mali, sans-serif; font-style: normal; color: #c9b88a; }
.trk-best .tbb-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 0.82rem/1.3 Mali, sans-serif; color: #e2d6b4; }
.trk-best .tbb-s em { padding: 0 8px; border-radius: 999px; font-style: normal; font-weight: 800; }
.trk-best .tbb-s em.ok { color: #10240c; background: #9be38a; }
.trk-best .tbb-s em.bad { color: #2a0c04; background: #ffae7a; }
.trk-best .tbb-q { text-decoration: none; padding: 0 6px; border-radius: 999px; color: #c9b88a; box-shadow: inset 0 0 0 1px rgba(201, 184, 138, 0.5); cursor: help; font-size: 0.74rem; }
.trk-best .tbb-go { flex: none; padding: 9px 16px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #ffe08a, #d9a443); color: #2a1a04; font: 800 0.95rem/1 Mali, sans-serif; cursor: pointer; box-shadow: 0 2px 0 #7a5410; }
.trk-best .tbb-go:hover { filter: brightness(1.08); }
.trk-pinb { flex: none; align-self: center; padding: 6px 12px; border: 1px solid rgba(255, 216, 102, 0.7); border-radius: 999px; background: rgba(30, 22, 10, 0.92); color: #ffe7a6; font: 700 0.85rem/1.2 Mali, sans-serif; cursor: pointer; white-space: nowrap; }
.trk-pinb:hover { background: rgba(80, 60, 20, 0.95); }
.trk-pinb.on { border-color: #8be37b; color: #d8ffcc; }
#itempop.mc-pop .mi-head .trk-pinb { margin-left: auto; }
#itempop.mc-pop .trk-best { margin-top: -2px; }
.trk-bag { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.trk-bag .trk-pinb { align-self: flex-start; }
.trk-bag .trk-best { gap: 8px; padding: 7px 8px 7px 10px; }
.trk-bag .trk-best .tbb-m { font-size: 0.86rem; }
.trk-bag .trk-best .tbb-go { padding: 7px 10px; font-size: 0.82rem; }

/* the "ขาดอะไรบ้าง" button on the pages */
.trk-missbtn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border: 1px solid #ffd866; border-radius: 999px; background: rgba(40, 28, 8, 0.92); color: #ffe7a6; font: 700 12.5px/1.2 Mali, sans-serif; cursor: pointer; white-space: nowrap; vertical-align: middle; }
.trk-missbtn:hover { background: rgba(90, 64, 18, 0.95); color: #fff6dc; }
.m4-why .trk-missbtn { margin-left: 6px; }
.fz-missrow, .m4f-missrow { display: flex; justify-content: center; margin: 4px 0 2px; }
.cm-dbar .trk-missbtn, .cm-tip .trk-missbtn { margin: 2px 0; }

/* ---- the panels (#trkpop): 📌 how many, ขาดอะไรบ้าง, the full list ---- */
#trkpop { position: fixed; inset: 0; z-index: 985; display: grid; place-items: center; background: rgba(0, 0, 0, 0.38); pointer-events: auto; }
#trkpop .tp-in { position: relative; box-sizing: border-box; width: min(600px, 94vw); max-height: 86vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-radius: 14px; background: rgba(18, 14, 10, 0.98); border: 2px solid #d9a443; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65); color: #f1ead6; font-family: Mali, sans-serif; }
#trkpop.tp-pin .tp-in { width: min(440px, 94vw); }
#trkpop .tp-x { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(217, 164, 67, 0.8); background: #1c160e; color: #ffd98a; font: 700 13px/1 sans-serif; cursor: pointer; }
#trkpop .tp-title { display: flex; flex-direction: column; gap: 2px; padding-right: 40px; }
#trkpop .tp-title b { font: 800 1.15rem/1.2 Mali, sans-serif; color: #ffe08a; }
#trkpop .tp-title small { font: 600 0.86rem/1.3 Mali, sans-serif; color: #d3cab3; }
#trkpop .tp-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
#trkpop .tp-head > span:last-child { display: flex; flex-direction: column; gap: 3px; }
#trkpop .tp-head b { font: 800 1.08rem/1.25 Mali, sans-serif; color: #ffe08a; }
#trkpop .tp-head small { font: 600 0.82rem/1.4 Mali, sans-serif; color: #cfc4a8; }
#trkpop .tslot { flex: none; width: 46px; height: 46px; cursor: help; }
#trkpop .tp-target { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#trkpop .tp-target > span { font: 700 0.95rem Mali, sans-serif; color: #f6ecd2; }
#trkpop .tp-target small { font: 600 0.85rem Mali, sans-serif; color: #ffcf7a; }
#trkpop .tp-num { width: 96px; padding: 6px 8px; border: 1.5px solid #d9a443; border-radius: 8px; background: #0e0a06; color: #fff; font: 700 1.05rem Fredoka, Mali, sans-serif; text-align: center; }
#trkpop .tp-step { width: 32px; height: 32px; padding: 0; border: 1px solid rgba(217, 164, 67, 0.8); border-radius: 8px; background: #241a0c; color: #ffe08a; font: 700 1.05rem/1 Fredoka, sans-serif; cursor: pointer; }
#trkpop .tp-step:hover { background: #3a2a10; }
#trkpop .tp-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 0.82rem Mali, sans-serif; color: #c9b88a; }
#trkpop .tp-chip { padding: 3px 10px; border: 1px solid rgba(217, 164, 67, 0.6); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #ffe7a6; font: 700 0.85rem Fredoka, Mali, sans-serif; cursor: pointer; }
#trkpop .tp-chip:hover { background: rgba(255, 216, 102, 0.18); }
#trkpop .tp-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
#trkpop .tp-btn { padding: 8px 14px; border: 1px solid rgba(217, 164, 67, 0.75); border-radius: 10px; background: #241a0c; color: #ffe7a6; font: 700 0.9rem/1.2 Mali, sans-serif; cursor: pointer; white-space: nowrap; }
#trkpop .tp-btn:hover:not(:disabled) { background: #3a2a10; }
#trkpop .tp-btn:disabled { opacity: 0.45; cursor: default; }
#trkpop .tp-btn.gold { border: 0; background: linear-gradient(180deg, #ffe08a, #d9a443); color: #2a1a04; box-shadow: 0 2px 0 #7a5410; }
#trkpop .tp-btn.blue { border-color: #7fc4ff; background: #10243a; color: #cfe8ff; }
#trkpop .tp-btn.blue:hover:not(:disabled) { background: #183552; }
#trkpop .tp-btn.on { border-color: #8be37b; color: #d8ffcc; }
#trkpop .tp-btn.small { padding: 5px 10px; font-size: 0.84rem; border-radius: 8px; }
#trkpop .tn-list, #trkpop .tg-list { display: flex; flex-direction: column; gap: 6px; }
#trkpop .tn-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.25); }
#trkpop .tn-row.done { background: rgba(255, 216, 102, 0.08); }
#trkpop .tn-row.on { box-shadow: inset 0 0 0 1.5px rgba(139, 227, 123, 0.7); }
#trkpop .tn-row .tslot { width: 40px; height: 40px; }
#trkpop .tn-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#trkpop .tn-n b { font: 700 0.95rem/1.25 Mali, sans-serif; color: #fff6dc; }
#trkpop .tn-c { font: 600 0.84rem/1.3 Mali, sans-serif; color: #d3cab3; }
#trkpop .tn-c em { font-style: normal; color: #ff9a6a; font-weight: 800; }
#trkpop .tn-src { font: 500 0.78rem/1.35 Mali, sans-serif; color: #c9b88a; }
#trkpop .tn-src i { font-style: normal; color: #a99a76; }
#trkpop .tn-src em { padding: 0 6px; border-radius: 999px; font-style: normal; font-weight: 800; }
#trkpop .tn-src em.ok { color: #10240c; background: #9be38a; }
#trkpop .tn-src em.bad { color: #2a0c04; background: #ffae7a; }
#trkpop .tn-src span { margin-left: 6px; }
#trkpop .tn-b { flex: none; display: flex; align-items: center; gap: 6px; }
#trkpop .tn-step { display: inline-flex; align-items: center; gap: 4px; }
#trkpop .tn-step b { min-width: 34px; text-align: center; font: 700 0.9rem Fredoka, Mali, sans-serif; color: #fff; }
#trkpop .tn-step .tp-step { width: 26px; height: 26px; font-size: 0.95rem; }
#trkpop .tg-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
#trkpop .tg-row.ready { background: rgba(255, 216, 102, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 216, 102, 0.6); }
#trkpop .tg-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#trkpop .tg-row b { font: 700 0.9rem/1.25 Mali, sans-serif; color: #fff6dc; }
#trkpop .tg-row small { font: 600 0.8rem Mali, sans-serif; color: #c9b88a; }
#trkpop .tp-sub { font: 800 0.9rem Mali, sans-serif; color: #f6dc98; }
#trkpop .tp-note { margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(255, 150, 90, 0.12); color: #ffcfae; font: 600 0.86rem/1.4 Mali, sans-serif; }
#trkpop .tp-hint { margin: 0; font: 600 0.84rem/1.4 Mali, sans-serif; color: #b8ad94; }
#trkpop .tp-done { margin: 4px 0; padding: 12px; border-radius: 10px; background: rgba(139, 227, 123, 0.12); color: #d8ffcc; font: 800 1rem Mali, sans-serif; text-align: center; }
@media (max-width: 560px) {
  #trkpop .tn-row { flex-wrap: wrap; }
  #trkpop .tn-b { width: 100%; justify-content: flex-end; }
  .trk-best { flex-wrap: wrap; }
  .trk-best .tbb-go { width: 100%; }
}