/* Lakbay gear: the Pandayan on the walk map, the forge window, the Passport Gear tab and the drop note. Classes start with lk-f, lk-g or lk-drop. */

.lk-spot.pandayan::before { display: none; }

/* the forge window (dark panel, like the Tiangge) */
.lk-card.lk-fg { position: relative; width: min(640px, 100%); text-align: left; gap: 8px; }
.lk-fgbody { overflow: auto; max-height: min(560px, calc(100vh - 190px)); }
.lk-fgtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 36px; }
.lk-fgtop small { color: var(--muted); font-weight: 700; }
.lk-fg .lk-art { width: 44px; height: 44px; flex: none; border-radius: 8px; background: #3b2947; border: 2px solid #5d4470; overflow: hidden; }
.lk-fg .lk-art svg { width: 100%; height: 100%; display: block; }
.lk-fg .lk-g { display: grid; min-width: 0; flex: 1; }
.lk-fg small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.lk-fglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lk-fgrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 10px; text-align: left; border-radius: 9px; border: 2px solid transparent; background: var(--plum-d); color: var(--cream); }
.lk-fgrow:hover, .lk-fgrow:focus-visible { border-color: var(--amber); }
.lk-fgrow b { font-weight: 800; line-height: 1.2; }
.lk-fgst { padding: 2px 10px; border-radius: 999px; border: 2px solid #5d4470; font-size: 12px; font-weight: 800; white-space: nowrap; }
.lk-fgst.ready { background: #6fae4f; border-color: #2f5a1c; color: #10250a; }
.lk-fgst.forged { background: var(--amber); border-color: var(--amber); color: #3a1a05; }
.lk-fgst.short, .lk-fgst.need-coins { color: #ff9a8a; border-color: #b8483a; }
.lk-fgdet { display: grid; gap: 10px; }
.lk-fgdet > .lk-btn, .lk-fgdet > .lk-btn.go { min-height: 44px; justify-self: start; }
.lk-fgdet > .lk-btn.go { justify-self: stretch; }
.lk-fgmain { display: flex; gap: 12px; align-items: flex-start; }
.lk-fg .lk-art.lk-fgbig { width: 84px; height: 84px; border-radius: 12px; }
.lk-fgmain p { margin: 4px 0 0; font-size: 13px; }
.lk-fgmats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lk-fgmat { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 44px; border-radius: 9px; background: var(--plum-d); border: 2px solid transparent; }
.lk-fgmat .lk-art { width: 36px; height: 36px; }
.lk-fgn { font-variant-numeric: tabular-nums; }
.lk-fgmat.short, .lk-fgfee.short { border-color: #b8483a; }
.lk-fgmat.short .lk-fgn, .lk-fgmat.short small, .lk-fgfee.short .lk-cn { color: #ff9a8a; }
.lk-fgfee { display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 44px; border-radius: 9px; background: var(--plum-d); border: 2px solid transparent; }
.lk-fgfee small { margin-left: auto; }

/* the Passport Gear tab (on the paper page) */
.lk-gslots { display: grid; gap: 8px; }
.lk-gslot { display: grid; gap: 6px; padding: 8px 10px; border-radius: 8px; background: #f8ecd2; border: 2px solid #c9a774; }
.lk-gshead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #4a3320; }
.lk-gshead small, .lk-gnone, .lk-gbonus { color: #7a5a38; font-weight: 700; font-size: 13px; }
.lk-gbonus { margin: 0; }
.lk-gopts { display: grid; gap: 6px; }
.lk-gopt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; text-align: left; border-radius: 8px; border: 2px solid #c9a774; background: #fff6e0; color: #4a3320; }
.lk-gopt:hover { border-color: #8a5a2b; }
.lk-gopt.on { border-color: #4a7a2a; background: #e3f0c8; }
.lk-gopt .lk-art { width: 40px; height: 40px; flex: none; border-radius: 6px; background: #f8ecd2; overflow: hidden; }
.lk-gopt .lk-art svg { width: 100%; height: 100%; display: block; }
.lk-gopt span:last-child { display: grid; }
.lk-gopt small { color: #7a5a38; font-weight: 700; }

/* the drop note on the result screen */
.lk-drop { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 226, 160, .12); border: 2px solid var(--amber); text-align: left; }
.lk-drop .lk-art { width: 44px; height: 44px; flex: none; border-radius: 8px; background: #3b2947; border: 2px solid #5d4470; overflow: hidden; }
.lk-drop .lk-art img, .lk-drop .lk-art svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.lk-drop span:last-child { display: grid; line-height: 1.25; }
.lk-drop small { color: var(--muted); font-weight: 700; }

/* a material on a province map */

@media (max-width: 640px) {
  .lk-fgmain { flex-direction: column; }
  .lk-fgst { font-size: 11px; padding: 2px 8px; }
}

/* the material chip on a province map */
[data-screen="province"] div.lk-ptag.lk-pmatc { top: 60px; left: 8px; right: auto; border-radius: 14px; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.lk-pmatc .lk-art { width: 32px; height: 32px; flex: none; border-radius: 6px; overflow: hidden; }
.lk-pmatc .lk-art img, .lk-pmatc .lk-art svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.lk-pmatc span { display: grid; line-height: 1.1; text-align: left; }
.lk-pmatc small { font-size: 11px; color: var(--muted); font-weight: 800; }
.lk-bkpg .lk-gbonus { color: #6a4a28; opacity: 1; }
.lk-fg > .lk-x { top: 6px; right: 6px; width: 44px; height: 44px; }