/* The map-quest board (2026-10-18, js/mqboard.js): MIR4's request board laid out the same way, in the game's obsidian + gold
   (the top bar as css/ranking.css). Laid out at 1440 x 860 and scaled to the window (.mb-stage); a phone gets one column
   (.mb-narrow). No soft halos round text: at most a crisp 1px ring. */
#mqboard { position: fixed; inset: 0; z-index: 900; pointer-events: auto; overflow: hidden; user-select: none; font-family: 'Mali', sans-serif; color: #f2ead6;
  background: radial-gradient(ellipse 75% 70% at 55% 50%, #1f1d24 0%, #141318 62%, #0c0b0f 100%); animation: mbIn 0.2s ease-out both; }
@keyframes mbIn { from { opacity: 0; } to { opacity: 1; } }
#mqboard[hidden], #mqboard [hidden] { display: none !important; }
#mqboard button { font-family: 'Mali', sans-serif; color: inherit; }
#mqboard .mb-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; }

/* ---- top bar: tabs | money | ? ภารกิจ exit ---- */
#mqboard .mb-top { position: relative; flex: none; height: 48px; display: flex; align-items: stretch; background: linear-gradient(#0b0a0e, #17151c); border-bottom: 1px solid rgba(217, 164, 67, 0.35); }
#mqboard .mb-tabs { display: flex; padding-left: 10px; }
#mqboard .mb-tabs button { width: 130px; border: 0; background: none; color: #9b927f; font: 600 16px Mali, sans-serif; cursor: pointer; border-bottom: 2px solid transparent; padding: 0; }
#mqboard .mb-tabs button.on { color: #f2c66a; border-bottom-color: #d9a443; background: linear-gradient(rgba(217, 164, 67, 0), rgba(217, 164, 67, 0.14)); cursor: default; }
#mqboard .mb-tabs button:not(.on):hover { color: #e6d3a3; }
#mqboard .mb-cur { margin-left: auto; margin-right: 210px; display: flex; align-items: center; gap: 8px; }
#mqboard .mb-cur > span { display: flex; align-items: center; gap: 6px; height: 26px; min-width: 118px; padding: 0 10px 0 6px; border-radius: 4px; background: #0a090c; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.4); cursor: pointer; }
#mqboard .mb-cur img { width: 19px; height: 19px; object-fit: contain; }
#mqboard .mb-cur em { margin-left: auto; font: 700 13.5px Fredoka, Mali, sans-serif; font-style: normal; color: #f6ead0; font-variant-numeric: tabular-nums; }
#mqboard .mb-title { position: absolute; right: 12px; top: 6px; display: flex; align-items: center; gap: 10px; }
#mqboard .mb-title b { font: 700 23px/36px 'Mali', sans-serif; color: #d9c9a2; letter-spacing: 1px; }
#mqboard .mb-help { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #b9ab8c; background: none; color: #d9c9a2; font: 800 15px/22px Fredoka, sans-serif; cursor: pointer; }
#mqboard .mb-help:hover, #mqboard .mb-help:focus-visible { border-color: #f2c66a; color: #f2c66a; }
#mqboard .mb-exit { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: none; display: grid; place-items: center; }
#mqboard .mb-exit i { width: 30px; height: 30px; background: var(--uib-btn_close, url(../assets/ui_book/btn_close.png)) center / contain no-repeat; transition: transform 0.12s, filter 0.12s; }
#mqboard .mb-exit:hover i, #mqboard .mb-exit:focus-visible i { transform: scale(1.1); filter: brightness(1.2); }

/* ---- the region row (MIR4: สนาม · ชั้นสูง · เขาวงกต (1) ...) ---- */
#mqboard .mb-regions { flex: none; height: 50px; display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(#16151a, #131217); overflow-x: auto; scrollbar-width: none; }
#mqboard .mb-regions button { flex: none; min-width: 180px; padding: 4px 16px 0; border: 0; background: none; color: #a39a86; font: 600 15px/1.25 Mali, sans-serif; cursor: pointer; border-bottom: 3px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; }
#mqboard .mb-regions button i { font-style: normal; color: #ff8a6a; font-weight: 700; }
#mqboard .mb-regions button small { font: 500 11px Fredoka, Mali, sans-serif; color: #7f776a; }
#mqboard .mb-regions button.on { color: #f8dc9a; border-bottom-color: #d9a443; background: linear-gradient(rgba(217, 164, 67, 0), rgba(217, 164, 67, 0.16)); }
#mqboard .mb-regions button.dim { opacity: 0.55; }
#mqboard .mb-regions button:not(.on):hover { color: #e6d3a3; opacity: 1; }

/* ---- body: the map column | the list ---- */
#mqboard .mb-body { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 8px 14px 12px 8px; }
#mqboard .mb-maps { flex: none; width: 262px; display: flex; flex-direction: column; min-height: 0; }
#mqboard .mb-maplist { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5a3a transparent; display: flex; flex-direction: column; gap: 3px; padding-right: 3px; }
#mqboard .mb-map { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 6px 12px 6px 14px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; cursor: pointer; text-align: left;
  background: linear-gradient(90deg, #1d1c22, #18171c); color: #ddd3bf; }
#mqboard .mb-map span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#mqboard .mb-map b { font: 600 14.5px/1.25 Mali, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mqboard .mb-map small { font: 500 11.5px/1.3 Fredoka, Mali, sans-serif; color: #8f8775; white-space: nowrap; }
#mqboard .mb-map em { flex: none; font: 700 13px Fredoka, Mali, sans-serif; font-style: normal; color: #cfc4ad; }
#mqboard .mb-map.full em { color: #8be37b; }
#mqboard .mb-map:hover { border-color: rgba(217, 164, 67, 0.45); }
#mqboard .mb-map.sel { border-color: #d9a443; background: linear-gradient(90deg, rgba(217, 164, 67, 0.28), rgba(217, 164, 67, 0.08)); color: #fff4d6; box-shadow: inset 3px 0 0 #f2c66a; }
#mqboard .mb-map.lock { color: #8f8775; }
#mqboard .mb-map.lock b { color: #a39a86; }
#mqboard .mb-pad { flex: none; width: 14px; height: 16px; position: relative; margin-right: 2px; }
#mqboard .mb-pad::before { content: ''; position: absolute; left: 2px; top: 0; width: 6px; height: 7px; border: 2px solid #9b927f; border-bottom: 0; border-radius: 5px 5px 0 0; }
#mqboard .mb-pad::after { content: ''; position: absolute; left: 0; bottom: 0; width: 14px; height: 9px; border-radius: 2px; background: #9b927f; }
#mqboard .mb-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e2353b; color: #fff; font: 700 10.5px/16px Fredoka, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 1px #2a0a0a; }
#mqboard .mb-all { flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; color: #b9ae96; font: 500 13px Mali, sans-serif; cursor: pointer; }
#mqboard .mb-all input { width: 17px; height: 17px; accent-color: #d9a443; }
#mqboard .mb-none { padding: 18px; color: #8f8775; font: 500 13px Mali, sans-serif; text-align: center; }

#mqboard .mb-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* ---- the strip: ⓘ progress x/20 + chests | เล่นอัตโนมัติ · รับทั้งหมด · ติดตาม ---- */
#mqboard .mb-strip { flex: none; height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border: 1px solid rgba(217, 164, 67, 0.22); border-radius: 6px; background: linear-gradient(#1e1c22, #17161b); }
#mqboard .mb-prog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
#mqboard .mb-pi { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #9b927f; color: #cfc4ad; font: 700 12px/17px Fredoka, sans-serif; text-align: center; }
#mqboard .mb-prog > b { flex: none; font: 700 15px Mali, sans-serif; color: #f2dfae; white-space: nowrap; }
#mqboard .mb-track { position: relative; flex: 1; height: 12px; margin: 0 28px 0 8px; border-radius: 6px; background: #0b0a0e; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#mqboard .mb-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #b8862e, #f2c66a); transition: width 0.3s; }
#mqboard .mb-chest { position: absolute; top: 50%; width: 52px; height: 58px; margin: -32px 0 0 -26px; padding: 0; border: 0; background: none; cursor: pointer; }
#mqboard .mb-chest img { width: 50px; height: 50px; object-fit: contain; filter: grayscale(0.55) brightness(0.75); transition: transform 0.12s, filter 0.12s; }
#mqboard .mb-chest small { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); font: 700 11.5px Fredoka, sans-serif; color: #cfc4ad; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
#mqboard .mb-chest.ready img { filter: none; animation: mbBob 1.1s ease-in-out infinite; }
#mqboard .mb-chest.ready::before { content: ''; position: absolute; left: 50%; top: 46%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 110, 0.55), rgba(255, 214, 110, 0)); animation: mbGlow 1.4s ease-in-out infinite; pointer-events: none; }
#mqboard .mb-chest.got img { filter: grayscale(0.2) brightness(0.9); opacity: 0.8; }
#mqboard .mb-chest .mb-dot { top: 0; right: 0; min-width: 12px; height: 12px; padding: 0; }
#mqboard .mb-chest:hover img, #mqboard .mb-chest:focus-visible img { transform: scale(1.1); }
@keyframes mbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mbGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
#mqboard .mb-acts { flex: none; display: flex; align-items: center; gap: 8px; }
#mqboard .mb-auto { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px 0 14px; border: 1px solid #6fb8e8; border-radius: 23px; cursor: pointer;
  background: linear-gradient(#3e8fc4, #23628f); color: #fff; font: 700 15.5px Mali, sans-serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
#mqboard .mb-auto i { font-style: normal; font: 700 22px/1 sans-serif; }
#mqboard .mb-auto:hover:not([disabled]) { filter: brightness(1.12); }
#mqboard .mb-auto.on { background: linear-gradient(#5aa84a, #2f7426); border-color: #9be38a; }
#mqboard .mb-auto[disabled] { filter: grayscale(0.8) brightness(0.6); cursor: default; }
#mqboard .mb-claim, #mqboard .mb-trk { height: 40px; padding: 0 16px; border: 1px solid #6b5a3a; border-radius: 4px; cursor: pointer; background: linear-gradient(#2c2620, #1d1914); color: #cfc4ad; font: 600 14px Mali, sans-serif; }
#mqboard .mb-claim.ready { border-color: #e0b452; color: #1c1408; background: linear-gradient(#f2c66a, #c9932e); }
#mqboard .mb-claim[disabled] { opacity: 0.5; cursor: default; }
#mqboard .mb-trk.on { border-color: #d9a443; color: #f2c66a; }
#mqboard .mb-claim:hover:not([disabled]), #mqboard .mb-trk:hover { filter: brightness(1.12); }
#mqboard .mb-story { flex: none; display: flex; align-items: baseline; gap: 12px; padding: 7px 6px 6px; min-width: 0; }
#mqboard .mb-story b { flex: none; font: 600 14px Mali, sans-serif; color: #e6d3a3; }
#mqboard .mb-story span { flex: 1; min-width: 0; font: 500 12.5px/1.3 Mali, sans-serif; color: #9b927f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mqboard .mb-lockline { flex: none; font: 600 12.5px Mali, sans-serif; font-style: normal; color: #e8a36a; }

/* ---- the rows ---- */
#mqboard .mb-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5a3a transparent; display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 40px 0; }
#mqboard .mb-row { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 190px 320px 210px; align-items: center; gap: 12px; min-height: 76px; padding: 8px 14px 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; background: linear-gradient(90deg, #22212a, #1b1a21); overflow: hidden; }
#mqboard .mb-row.now { border-color: rgba(217, 164, 67, 0.6); background: linear-gradient(90deg, #2c2717, #1f1c18 55%, #1b1a21); box-shadow: inset 3px 0 0 #f2c66a; }
#mqboard .mb-row.run { box-shadow: inset 3px 0 0 #8be37b; border-color: rgba(139, 227, 123, 0.55); }
/* row states (2026-10-18, the user: "เควสที่ยังไม่ทำ กับเควสที่ทำแล้วให้มันเห็นและรู้สึกต่างกันหน่อย เช่นสีของตัวหนังสือ ที่สว่าง
   และสีดรอป"): the current row the brightest (its gold frame above), an open one as drawn, a done one calm and grey with its
   slots greyed under a ✓ stamp, a locked one dark with the lock. Dimmed by colour, not opacity, so the text stays readable. */
#mqboard .mb-row.now .mb-c1 b { color: #fff6dc; }
#mqboard .mb-row.now .mb-c1 small { color: #d6ccb6; }
#mqboard .mb-row.done { background: #141317; border-color: rgba(255, 255, 255, 0.05); }
#mqboard .mb-row.done .mb-c1 b { color: #9a9284; font-weight: 600; }
#mqboard .mb-row.done .mb-c1 small, #mqboard .mb-row.done .mb-c1 small span.ok { color: #8a8271; }
#mqboard .mb-row.done .mb-cp, #mqboard .mb-row.done .mb-lv { color: #847c6b; }
/* (a done quest: every reward it gave is ticked - 2026-10-19, the user: "ให้ติ๊กถูกทุกชิ้นที่ได้รับ"; the picture greyed under a dark
   veil, the tick on top stays green) */
#mqboard .mb-row.done .mb-slot > img, #mqboard .mb-row.done .mb-slot > b { filter: grayscale(1) brightness(0.75); opacity: 0.55; }
#mqboard .mb-row.done .mb-slot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(10, 9, 12, 0.45); pointer-events: none; }
#mqboard .mb-row.done .mb-chip { filter: grayscale(1); opacity: 0.6; }
#mqboard .mb-row.done .mb-slot::after { content: '✓'; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; box-sizing: border-box; border: 2px solid #6fbf62; border-radius: 50%; display: grid; place-items: center;
  background: rgba(12, 24, 12, 0.78); color: #8be37b; font: 800 19px/1 Fredoka, sans-serif; transform: rotate(-14deg); pointer-events: none; }
#mqboard .mb-donel { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(139, 227, 123, 0.1); color: #8fcf7f; font: 700 13.5px Mali, sans-serif; white-space: nowrap; }
#mqboard .mb-row.lock { background: #111014; border-color: rgba(255, 255, 255, 0.04); }
#mqboard .mb-row.lock .mb-c1 b { color: #8a8273; }
#mqboard .mb-row.lock .mb-c1 small { color: #807868; }
#mqboard .mb-row.lock .mb-cp { filter: saturate(0.5) brightness(0.8); }
#mqboard .mb-row.lock .mb-lv { color: #7a7364; }
#mqboard .mb-row.lock .mb-slot { filter: grayscale(0.55) brightness(0.6); }
#mqboard .mb-row.lock .mb-chip { filter: grayscale(0.6) brightness(0.75); }
#mqboard .mb-c1 { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#mqboard .mb-c1 b { font: 700 16px/1.3 Mali, sans-serif; color: #f4ead2; }
#mqboard .mb-c1 small { flex-basis: 100%; font: 500 12.5px/1.35 Mali, sans-serif; color: #9d9586; }
#mqboard .mb-c1 small span.ok { color: #8fcf7f; }
#mqboard .mb-c1 small i { font-style: normal; color: #5f584c; margin: 0 6px; }
#mqboard .mb-st { font: 700 11px/18px Fredoka, Mali, sans-serif; font-style: normal; padding: 0 8px; border-radius: 9px; white-space: nowrap; }
#mqboard .mb-st.done { color: #9be38a; background: rgba(139, 227, 123, 0.14); }
#mqboard .mb-st.now { color: #1c1408; background: #f2c66a; }
#mqboard .mb-st.wait { color: #ffd59a; background: rgba(240, 160, 80, 0.18); }
#mqboard .mb-st.lock { color: #a39a86; background: rgba(255, 255, 255, 0.07); }
#mqboard .mb-c2 { display: flex; flex-direction: column; gap: 4px; }
#mqboard .mb-cp { font: 600 13px Mali, sans-serif; white-space: nowrap; }
#mqboard .mb-cp.ok { color: #7fd06f; }
#mqboard .mb-cp.low { color: #ff6a5a; }
#mqboard .mb-lv { font: 600 12.5px Fredoka, Mali, sans-serif; color: #a39a86; }
#mqboard .mb-c3 { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#mqboard .mb-slots { display: flex; gap: 5px; }
#mqboard .mb-slots .mb-slot { width: 48px; height: 48px; }
/* gold + EXP: chips like the money at the top (2026-10-18) */
#mqboard .mb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#mqboard .mb-chip { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px 0 4px; border-radius: 4px; background: #0a090c; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); white-space: nowrap; }
#mqboard .mb-chip.gold { cursor: pointer; }
#mqboard .mb-chip img { width: 16px; height: 16px; object-fit: contain; }
#mqboard .mb-chip em { font: 700 12.5px Fredoka, Mali, sans-serif; font-style: normal; color: #f6ead0; font-variant-numeric: tabular-nums; }
#mqboard .mb-chip.gold em { color: #ffd95a; }
#mqboard .mb-chip.exp em { color: #b8f0a8; }
/* the word EXP in place of a picture (here and on the quest book's reward chips) */
.xp-tag { display: inline-block; height: 15px; padding: 0 4px; border-radius: 3px; background: linear-gradient(#5fc46b, #2e8a3c); color: #fff; font: 800 10px/15px Fredoka, Mali, sans-serif; font-style: normal; letter-spacing: 0.4px; }
#mqboard .mb-slot { position: relative; flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 9%; cursor: pointer;
  background: url(../assets/ui_slot_mir4/slot_g0.png) center / 100% 100% no-repeat; }
#mqboard .mb-slot.g1 { background-image: url(../assets/ui_slot_mir4/slot_g1.png); }
#mqboard .mb-slot.g2 { background-image: url(../assets/ui_slot_mir4/slot_g2.png); }
#mqboard .mb-slot.g3 { background-image: url(../assets/ui_slot_mir4/slot_g3.png); }
#mqboard .mb-slot.g4 { background-image: url(../assets/ui_slot_mir4/slot_g4.png); }
#mqboard .mb-slot.g5 { background-image: url(../assets/ui_slot_mir4/slot_g5.png); }
#mqboard .mb-slot img { width: 72%; height: 72%; object-fit: contain; }
#mqboard .mb-slot b { position: absolute; right: 4px; bottom: 1px; font: 700 12px Fredoka, sans-serif; color: #fff; text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000; }
#mqboard .mb-slot:hover { filter: brightness(1.15); }
#mqboard .mb-c4 { display: flex; justify-content: flex-end; gap: 6px; }
#mqboard .mb-btn { min-width: 96px; height: 42px; padding: 0 14px; border: 1px solid #6b5a3a; border-radius: 4px; cursor: pointer; background: linear-gradient(#2c2620, #1d1914); color: #e6d3a3; font: 700 14.5px Mali, sans-serif; white-space: nowrap; }
#mqboard .mb-btn:hover:not([disabled]) { filter: brightness(1.15); }
#mqboard .mb-btn.go, #mqboard .mb-btn.take { border-color: #e0b452; color: #1c1408; background: linear-gradient(#f2c66a, #c9932e); }
#mqboard .mb-btn.go.on { border-color: #9be38a; color: #fff; background: linear-gradient(#5aa84a, #2f7426); }
#mqboard .mb-btn.self { border-color: #6fb8e8; color: #fff; background: linear-gradient(#3e8fc4, #23628f); }
#mqboard .mb-btn.sub { min-width: 88px; font-weight: 600; font-size: 13.5px; }
#mqboard .mb-btn.done { border-color: rgba(139, 227, 123, 0.4); color: #9be38a; background: none; cursor: default; }
#mqboard .mb-btn.lock { border-color: rgba(255, 255, 255, 0.12); color: #8f8775; background: #17161b; cursor: help; }
#mqboard .mb-more { grid-column: 1 / -1; margin-top: 4px; padding: 8px 12px; border-radius: 4px; background: rgba(0, 0, 0, 0.28); border-left: 3px solid #d9a443; }
#mqboard .mb-more b { font: 600 13px Mali, sans-serif; color: #f2c66a; }
#mqboard .mb-more p { margin: 3px 0 0; font: 500 13px/1.45 Mali, sans-serif; color: #d6ccb6; }
#mqboard .mb-more .mb-hint { color: #a9c7d8; font-size: 12.5px; }
#mqboard .mb-sep { margin: 10px 0 2px; padding: 0 4px; font: 700 14px Mali, sans-serif; color: #e6d3a3; border-bottom: 1px solid rgba(217, 164, 67, 0.25); line-height: 28px; }
/* MIR4's DAILY ribbon: the bounties, taken again and again */
#mqboard .mb-ribbon { position: absolute; left: -26px; top: 9px; width: 92px; transform: rotate(-38deg); background: #2f8f4a; color: #fff; font: 700 10.5px/17px Fredoka, Mali, sans-serif; font-style: normal; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
#mqboard .mb-row.rep { padding-left: 34px; }
/* the tip bar over the list (a locked row: what opens it) */
#mqboard .mb-tip { position: absolute; left: 0; right: 4px; bottom: 6px; padding: 10px 16px; border-radius: 4px; background: rgba(8, 8, 10, 0.94); border: 1px solid rgba(217, 164, 67, 0.35); font: 500 14px/1.4 Mali, sans-serif; color: #e8dfca; pointer-events: none; }
#mqboard .mb-tip b { color: #8be37b; }

/* ---- popups: a chest's contents, help ---- */
#mqboard .mb-pop { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); }
#mqboard .mb-popin { position: relative; min-width: 380px; max-width: 620px; padding: 20px 24px; border-radius: 8px; border: 1px solid rgba(217, 164, 67, 0.55); background: linear-gradient(#211f26, #16151a); }
#mqboard .mb-popin h3 { margin: 0 30px 12px 0; font: 700 18px Mali, sans-serif; color: #f2dfae; }
#mqboard .mb-px { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border: 0; background: none; color: #cfc4ad; font: 700 18px sans-serif; cursor: pointer; }
#mqboard .mb-popitems { display: flex; flex-wrap: wrap; gap: 8px; }
#mqboard .mb-popitems .mb-slot { width: 64px; height: 64px; }
#mqboard .mb-pnote { margin: 12px 0 0; font: 500 13.5px Mali, sans-serif; color: #b9ae96; }
#mqboard .mb-pacts { margin-top: 14px; display: flex; justify-content: flex-end; }
#mqboard .mb-helpl { margin: 0; padding-left: 20px; font: 500 14px/1.6 Mali, sans-serif; color: #ddd3bf; }
#mqboard .mb-helpl b { color: #f2c66a; }
#mqboard .mb-say { position: absolute; left: 50%; top: 54px; transform: translateX(-50%); max-width: 80%; padding: 9px 18px; border-radius: 6px; background: rgba(10, 9, 12, 0.94); border: 1px solid rgba(217, 164, 67, 0.5); font: 600 14px Mali, sans-serif; color: #f6ead0; pointer-events: none; }

/* ---- the quest box: a chest ready on this map ---- */
#questbox .q-mqgift { font-style: normal; margin-left: 3px; }

/* ---- phone: one column ---- */
#mqboard.mb-narrow .mb-cur, #mqboard.mb-narrow .mb-title b, #mqboard.mb-narrow .mb-help { display: none; }
#mqboard.mb-narrow .mb-tabs button { width: auto; padding: 0 10px; font-size: 14px; }
#mqboard.mb-narrow .mb-body { flex-direction: column; padding: 6px; }
#mqboard.mb-narrow .mb-maps { width: auto; height: auto; }
#mqboard.mb-narrow .mb-maplist { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
#mqboard.mb-narrow .mb-map { flex: none; width: 200px; }
#mqboard.mb-narrow .mb-all { display: none; }
#mqboard.mb-narrow .mb-strip { height: auto; flex-direction: column; align-items: stretch; padding: 10px; gap: 16px; }
#mqboard.mb-narrow .mb-track { margin: 16px 26px 6px 8px; }
#mqboard.mb-narrow .mb-acts { flex-wrap: wrap; }
#mqboard.mb-narrow .mb-row { grid-template-columns: 1fr; min-height: 0; }
#mqboard.mb-narrow .mb-regions button { min-width: 150px; }
#mqboard.mb-narrow .mb-c4 { justify-content: flex-start; }

/* ---- every quest page as this board (2026-10-18: main story, side quests, growth as views) ---- */
#mqboard .mb-tabs button { position: relative; }
#mqboard .mb-tdot { display: inline-block; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: #e2353b; color: #fff; font: 700 11px/18px Fredoka, sans-serif; font-style: normal; vertical-align: 2px; }
#mqboard .mb-st.can { color: #10230b; background: #8be37b; }
#mqboard .mb-st.map { color: #cfe3f2; background: rgba(111, 184, 232, 0.16); }
#mqboard .mb-map.cur b::before { content: '▶ '; color: #f2c66a; font-size: 12px; }
#mqboard .mb-map.pin { border-color: rgba(111, 184, 232, 0.35); background: linear-gradient(90deg, #1b2129, #17191e); margin-bottom: 4px; }
#mqboard .mb-map.pin.sel { border-color: #6fb8e8; background: linear-gradient(90deg, rgba(111, 184, 232, 0.26), rgba(111, 184, 232, 0.07)); box-shadow: inset 3px 0 0 #8fd0ff; }
#mqboard .mb-sum { font: 600 13.5px Mali, sans-serif; color: #cfc4ad; white-space: nowrap; padding: 0 6px; }
#mqboard .mb-macts { display: flex; gap: 8px; margin-top: 8px; }
#mqboard .mb-macts .mb-btn { height: 34px; min-width: 0; }
#mqboard .mb-start .eco-goldchip { font-size: 12.5px; margin-right: 6px; }
#mqboard .mb-start .eco-goldchip img { width: 18px; height: 18px; }
#mqboard .mb-chip.title { cursor: pointer; }
#mqboard .mb-chip.title em { color: #f2c66a; }
.xp-tag.tt { background: linear-gradient(#d9a443, #9c6c1c); }
#mqboard.mb-narrow .mb-tabs { overflow-x: auto; scrollbar-width: none; margin-right: 50px; }
#mqboard.mb-narrow .mb-tabs button { flex: none; }
/* ---- เควสรอง (2026-10-19, the user: "เควสรองที่กำลังทำหรือเควสสีฟ้าที่รับไว้แสดงขึ้นไม่หมด"): the red dots were read as quests taken.
   Now words: green "รับได้ N" = can still be taken there, blue "รับไว้ N" = taken (all of them in 📌 กำลังทำ) ---- */
#mqboard .mb-map em.mb-cnt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1.1; }
#mqboard .mb-can { display: inline-block; padding: 0 6px; border-radius: 8px; background: #2b8a45; color: #fff; font: 700 10.5px/16px Fredoka, Mali, sans-serif; font-style: normal; white-space: nowrap; }
#mqboard .mb-regions .mb-can { margin-left: 6px; vertical-align: 1px; }
#mqboard .mb-has { font-style: normal; font-weight: 700; color: #8fd0ff; }
#mqboard .mb-map small { overflow: hidden; text-overflow: ellipsis; }
#mqboard .mb-tdot.can { background: #2b8a45; }