/* =====================================================================
   The forge page made simple (2026-10-18, the user: "ทำระบบตีขึ้นรูปให้ใช้ง่ายและดูง่ายไม่ซับซ้อน"): js/forge.js #forge .fz-*.
   A list of pieces with what each one needs, one now -> after card, the cost as framed icons with have/need, the chance in
   big, one button; the rarely needed numbers behind "?" (.fz-more). Colours are variables so the light book skins
   (<html data-booklight>, every skin but Obsidian Gold) get dark ink on their bright pages. Item frames: .tslot (craft2.css).
   ===================================================================== */
#forge { --fz-ink: #f3e8cf; --fz-dim: #bdb39c; --fz-head: #f6dc98; --fz-gold: #ffd76a; --fz-panel: rgba(0, 0, 0, 0.3); --fz-line: rgba(217, 164, 67, 0.42);
  --fz-sel: rgba(242, 193, 78, 0.16); --fz-good: #8be37b; --fz-bad: #ff7f6e; --fz-blue: #8cc8ff; --fz-sheet: #19140f; --fz-tint: rgba(255, 215, 106, 0.09);
  --fz-g0: #ece6d6; --fz-g1: #7fe07a; --fz-g2: #5fb4ff; --fz-g3: #c27bff; --fz-g4: #ffb340; --fz-g5: #ff5a6a; }
:root[data-booklight] #forge { --fz-ink: var(--bk-ink, #3a2410); --fz-dim: var(--bk-ink2, #6a4a26); --fz-head: var(--bk-acc, #7a4a10); --fz-gold: var(--bk-acc, #8a5a10);
  --fz-panel: color-mix(in srgb, var(--bk-acc, #8a5a10) 9%, transparent); --fz-line: color-mix(in srgb, var(--bk-acc, #8a5a10) 38%, transparent);
  --fz-sel: color-mix(in srgb, var(--bk-acc, #8a5a10) 18%, transparent); --fz-good: #1f6e17; --fz-bad: #b3261e; --fz-blue: #1d5fa8; --fz-sheet: #fffaf0;
  --fz-tint: color-mix(in srgb, var(--bk-acc, #8a5a10) 10%, transparent);
  --fz-g0: #5a5040; --fz-g1: #2b7a20; --fz-g2: #1c5fae; --fz-g3: #7434b8; --fz-g4: #a85f00; --fz-g5: #be2236; }
#forge .fz-g0 { color: var(--fz-g0); } #forge .fz-g1 { color: var(--fz-g1); } #forge .fz-g2 { color: var(--fz-g2); }
#forge .fz-g3 { color: var(--fz-g3); } #forge .fz-g4 { color: var(--fz-g4); } #forge .fz-g5 { color: var(--fz-g5); }
#forge button { font-family: Mali, sans-serif; }

/* the left page's top: the ตีบวก | ประเมิน | โรงตีเหล็ก switch (Eco.pairTabs) and this page's tabs (.fg-tabs like the enhance
   page's), fixed while the list under them scrolls; the old top tab row is not used */
#forge .eco-tabs { display: none !important; }
#forge .eco-main { display: flex; flex-direction: column; overflow: hidden; }
#forge .fz-head { flex: none; }
#forge .fz-head .eco-pair { margin-bottom: 6px; }
#forge .fz-sub { padding: 0 0 8px; gap: 12px; }
#forge .fz-sub button { white-space: nowrap; }
#forge .fz-sub button.fz-tool { font-size: 14px; }
#forge .fz-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
/* the left page: the filter, the pieces */
#forge .fz-filter { display: flex; gap: 6px; margin: 0 0 8px; }
#forge .fz-filter button { flex: 1; height: 38px; border: 0; border-radius: 10px; cursor: pointer; background: var(--fz-panel); color: var(--fz-dim); font: 700 14.5px Mali, sans-serif; }
#forge .fz-filter button b { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: rgba(0, 0, 0, 0.25); font: 800 12.5px/20px Fredoka, sans-serif; }
#forge .fz-filter button.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; }
#forge .fz-list { display: flex; flex-direction: column; gap: 6px; }
#forge .fz-row, #forge .fz-frow { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 5px 10px 5px 6px;
  box-sizing: border-box; border: 0; border-radius: 12px; cursor: pointer; text-align: left; background: var(--fz-panel); color: var(--fz-ink); }
#forge .fz-frow { cursor: default; }
#forge .fz-row:hover { background: var(--fz-sel); }
#forge .fz-row.sel { background: var(--fz-sel); box-shadow: inset 0 0 0 2px var(--fz-gold); }
#forge .fz-ic { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; }
#forge .fz-ic.plain { padding: 0; border: 0; background: none; cursor: pointer; }
#forge .fz-rn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#forge .fz-rn b { font: 700 15px/1.25 Mali, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#forge .fz-rn small { font: 500 12.5px/1.3 Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-rn small i { font-style: normal; color: var(--fz-gold); font-weight: 700; }
#forge .fz-pill { flex: none; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--fz-bad) 16%, transparent); color: var(--fz-bad); font: 700 12.5px/1.3 Mali, sans-serif; font-style: normal; white-space: nowrap; }
#forge .fz-pill.ok { background: color-mix(in srgb, var(--fz-good) 18%, transparent); color: var(--fz-good); }
#forge .fz-pill.ap { background: color-mix(in srgb, var(--fz-blue) 16%, transparent); color: var(--fz-blue); }
#forge .fz-pill.top { background: var(--fz-panel); color: var(--fz-dim); }
#forge .fz-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border-radius: 14px; border: 1.5px dashed var(--fz-line); text-align: center; }
#forge .fz-empty b { font: 800 16px Mali, sans-serif; color: var(--fz-head); }
#forge .fz-empty span { font: 500 13.5px/1.45 Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-link { margin-top: 6px; padding: 7px 16px; border: 0; border-radius: 99px; cursor: pointer; background: var(--fz-sel); box-shadow: inset 0 0 0 1.5px var(--fz-gold); color: var(--fz-head); font: 700 13.5px Mali, sans-serif; }
#forge .fz-lead { margin: 0 0 8px; font: 500 13px/1.45 Mali, sans-serif; color: var(--fz-dim); }

/* the right page: the work */
#forge .fz-work { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 100%; box-sizing: border-box; padding-bottom: 16px; color: var(--fz-ink); }
#forge .fz-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
#forge .fz-stepname { font: 800 15.5px Mali, sans-serif; color: var(--fz-head); }
#forge .fz-q { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; background: var(--fz-panel); box-shadow: inset 0 0 0 1.5px var(--fz-line); color: var(--fz-head); font: 800 17px/1 Fredoka, sans-serif; }
#forge .fz-q:hover, #forge .fz-q.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; box-shadow: none; }
#forge .fz-ladder { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#forge .fz-ladder span { padding: 4px 10px; border-radius: 99px; background: var(--fz-panel); color: var(--fz-dim); font: 700 13px Mali, sans-serif; white-space: nowrap; }
#forge .fz-ladder span.done { color: var(--fz-good); }
#forge .fz-ladder span.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; }
#forge .fz-ladder span.lock { opacity: 0.55; }
#forge .fz-ladder i { font: 800 14px Fredoka, sans-serif; font-style: normal; color: var(--fz-dim); }
/* now -> after */
#forge .fz-card { padding: 10px 0 2px; border-radius: 14px; background: radial-gradient(ellipse at 50% 55%, var(--fz-tint), transparent 70%); }
#forge .fz-card::before { display: none; }
#forge .fz-card.one { display: grid; place-items: center; grid-template-columns: 1fr; }
#forge .fz-side { gap: 5px; }
#forge .fz-side small { font: 700 13px Mali, sans-serif; color: var(--fz-dim); max-width: none; }
#forge .fz-side.after small { color: var(--fz-gold); }
#forge .fz-big, #forge .fz-card .fg-slot, #forge .fz-card .fg-core { position: relative; width: 92px; height: 92px; padding: 0; border: 0; border-radius: 10px; background: none; box-shadow: none; display: grid; place-items: center; }
#forge .fz-big .tslot { width: 92px; height: 92px; }
#forge .fz-big .tslot > img { width: 70%; height: 70%; }
#forge .fz-side.after .fz-big { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fz-gold) 55%, transparent)); }
#forge .fz-arw { display: flex; gap: 2px; padding: 0 4px; }
#forge .fz-arw i { width: 12px; height: 12px; border: solid var(--fz-gold); border-width: 0 4px 4px 0; transform: rotate(-45deg); opacity: 0.3; animation: fzArw 1.2s ease-in-out infinite; }
#forge .fz-arw i:nth-child(2) { animation-delay: 0.2s; } #forge .fz-arw i:nth-child(3) { animation-delay: 0.4s; }
@keyframes fzArw { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #forge .fz-arw i { animation: none; opacity: 0.8; } }
#forge .fz-name { margin: 0; font: 800 17px/1.3 Mali, sans-serif; text-align: center; }
/* the rows: CP first and big, then the stats that change */
#forge .fz-rows { display: flex; flex-direction: column; gap: 3px; }
#forge .fz-st { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px auto 70px; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--fz-panel); font: 600 14px Mali, sans-serif; }
#forge .fz-st span { color: var(--fz-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#forge .fz-st b { font: 700 14.5px Fredoka, Mali, sans-serif; color: var(--fz-ink); text-align: right; }
#forge .fz-st b.up { color: var(--fz-good); }
#forge .fz-st i { font-style: normal; color: var(--fz-dim); text-align: center; }
#forge .fz-st em { font: 700 13px Fredoka, Mali, sans-serif; font-style: normal; color: var(--fz-good); text-align: right; white-space: nowrap; }
#forge .fz-st.cp { padding: 7px 10px; background: var(--fz-tint); box-shadow: inset 0 0 0 1px var(--fz-line); }
#forge .fz-st.cp span { font: 800 15px Mali, sans-serif; color: var(--fz-head); }
#forge .fz-st.cp b { font-size: 17px; }
#forge .fz-st.cp em { font-size: 16px; font-weight: 800; }
#forge .fz-st.new em { color: var(--fz-gold); }
#forge .fz-all { align-self: flex-end; padding: 2px 6px; border: 0; background: none; cursor: pointer; color: var(--fz-gold); font: 700 12.5px Mali, sans-serif; }
#forge .fz-all.core { align-self: center; padding: 4px 10px; border-radius: 99px; background: var(--fz-panel); }
/* the cost: framed icons, have/need under them */
#forge .fz-costh { margin-top: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--fz-line); font: 800 14px Mali, sans-serif; color: var(--fz-head); }
#forge .fz-costh small { margin-left: 6px; font: 600 12px Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-cost { display: flex; flex-wrap: wrap; gap: 6px 8px; }
#forge .fz-mat { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 78px; padding: 2px 0; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--fz-ink); }
#forge .fz-mat:hover { background: var(--fz-panel); }
#forge .fz-mat .tslot { width: 54px; height: 54px; }
#forge .fz-mat b { font: 800 14.5px/1.2 Fredoka, Mali, sans-serif; color: var(--fz-ink); }
#forge .fz-mat small { max-width: 76px; font: 600 11.5px/1.2 Mali, sans-serif; color: var(--fz-dim); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#forge .fz-mat.short b { color: var(--fz-bad); }
#forge .fz-mat.short .tslot { border-radius: 9px; box-shadow: 0 0 0 2.5px var(--fz-bad); }
/* the chance and the button */
#forge .fz-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 6px; }
#forge .fz-odds { flex: none; display: flex; flex-direction: column; min-width: 118px; }
#forge .fz-odds small { font: 700 13px Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-odds b { font: 700 36px/1.05 Fredoka, sans-serif; color: var(--fz-gold); }
#forge .fz-odds b.hi { color: var(--fz-good); } #forge .fz-odds b.lo { color: var(--fz-bad); }
#forge .fz-odds em { max-width: 140px; font: 600 12px/1.3 Mali, sans-serif; font-style: normal; color: var(--fz-good); }
#forge .fz-go { flex: 1; min-width: 0; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 30px; border: 0; cursor: pointer;
  background: url(../assets/ui_craft/m4/btn_build.png) center / 100% 100% no-repeat; }
#forge .fz-go b { font: 800 21px/1.1 Mali, sans-serif; color: #ffe6a0; text-shadow: 1px 0 0 #1a0f04, -1px 0 0 #1a0f04, 0 1px 0 #1a0f04, 0 -1px 0 #1a0f04; white-space: nowrap; }
#forge .fz-go small { font: 600 11.5px Mali, sans-serif; color: #e8dcc0; text-shadow: 0 1px 0 #000; white-space: nowrap; }
#forge .fz-go:hover:not(:disabled) { filter: brightness(1.15); }
#forge .fz-go:disabled { cursor: default; background-image: url(../assets/ui_forge_m4/btn_main_off.png); }
#forge .fz-go:disabled b { font-size: 17px; color: #d8d0c0; }
#forge .fz-go.ap { filter: hue-rotate(175deg) saturate(0.8); }
#forge .fz-go.ap b, #forge .fz-go.ap small { filter: hue-rotate(-175deg); }
#forge .fz-safe { margin: 0; font: 600 12.5px Mali, sans-serif; color: var(--fz-dim); text-align: center; }
#forge .fz-warn { margin: 0; flex: none; max-width: 150px; font: 700 13px/1.35 Mali, sans-serif; color: var(--fz-bad); }
/* "?": the details sheet over the work */
#forge .fz-more { position: absolute; left: 0; right: 0; top: 38px; z-index: 8; padding: 10px 14px 12px; border-radius: 14px; background: var(--fz-sheet); box-shadow: inset 0 0 0 1.5px var(--fz-line), 0 12px 30px rgba(0, 0, 0, 0.45); }
#forge .fz-more-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
#forge .fz-more-h b { font: 800 16px Mali, sans-serif; color: var(--fz-head); }
#forge .fz-x { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; background: var(--fz-panel); color: var(--fz-ink); font: 700 15px Fredoka, sans-serif; }
#forge .fz-mrow { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--fz-line); }
#forge .fz-mrow span { font: 600 13px Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-mrow b { font: 700 13.5px/1.4 Mali, sans-serif; color: var(--fz-ink); }
#forge .fz-tog { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: var(--fz-panel); cursor: pointer; font: 600 13.5px/1.35 Mali, sans-serif; color: var(--fz-ink); }
#forge .fz-tog input { width: 19px; height: 19px; flex: none; accent-color: #d9a443; }
#forge .fz-tog i { font-style: normal; color: var(--fz-dim); }
/* awaken: the cores, the special */
#forge .fz-cores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#forge .fz-core { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 4px 2px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--fz-ink); }
#forge .fz-core .tslot { width: 48px; height: 48px; }
#forge .fz-core b { font: 800 12.5px Fredoka, sans-serif; color: var(--fz-bad); }
#forge .fz-core.ok b { color: var(--fz-good); }
#forge .fz-core.none img { filter: grayscale(1) brightness(0.6); }
#forge .fz-core.none b { color: var(--fz-dim); }
#forge .fz-core.on { background: var(--fz-sel); box-shadow: inset 0 0 0 2px var(--fz-gold); }
#forge .fz-coreno { margin: 2px 0; font: 600 13px/1.4 Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-spec { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: var(--fz-tint); box-shadow: inset 0 0 0 1px var(--fz-line); }
#forge .fz-spec b { font: 800 14px Mali, sans-serif; color: var(--fz-head); }
#forge .fz-spec span { font: 600 13.5px/1.4 Mali, sans-serif; color: var(--fz-good); }
#forge .fz-spec small { font: 500 12px Mali, sans-serif; color: var(--fz-dim); }
/* nothing picked: what the forge does; a ✦ piece below rare */
#forge .fz-intro, #forge .fz-done { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--fz-panel); box-shadow: inset 0 0 0 1px var(--fz-line); }
#forge .fz-intro > b, #forge .fz-done > b { font: 800 17px Mali, sans-serif; color: var(--fz-head); }
#forge .fz-intro > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; }
#forge .fz-intro > div > i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fz-tint); box-shadow: inset 0 0 0 1.5px var(--fz-line); color: var(--fz-gold); font: 800 15px Fredoka, sans-serif; font-style: normal; }
#forge .fz-intro span, #forge .fz-done span { font: 500 13.5px/1.45 Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-intro span b { display: block; font: 800 15px Mali, sans-serif; color: var(--fz-ink); }
/* the helpers */
#forge .fz-fbtn { display: flex; gap: 5px; }
#forge .fz-sbtn { height: 34px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer; background: var(--fz-panel); box-shadow: inset 0 0 0 1.5px var(--fz-line); color: var(--fz-ink); font: 700 13px Mali, sans-serif; }
#forge .fz-sbtn.pri { background: linear-gradient(#f6d27a, #d9a443); box-shadow: none; color: #2c2018; }
#forge .fz-sbtn:disabled { opacity: 0.45; cursor: default; }
#forge .fz-lines { display: flex; flex-direction: column; gap: 4px; }
#forge .fz-line { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 0; border-radius: 9px; cursor: pointer; text-align: left; background: var(--fz-panel); color: var(--fz-ink); font: 700 14px Mali, sans-serif; }
#forge .fz-line small { font: 500 12px Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-line.on { background: var(--fz-sel); box-shadow: inset 0 0 0 2px var(--fz-gold); }

/* (a ✦ badge on the after slot, the awaken page kept inside the page) */
#forge .fz-badge { position: absolute; right: -6px; top: -8px; z-index: 6; min-width: 24px; height: 24px; padding: 0 5px; box-sizing: border-box; border-radius: 99px; display: grid; place-items: center;
  background: linear-gradient(#ffe8a0, #d9a443); box-shadow: 0 0 0 2px #2c1d0c; color: #3a2408; font: 800 12px/1 Fredoka, sans-serif; font-style: normal; }
#forge .fz-work.aw .fz-card { padding-top: 4px; }
#forge .fz-work.aw .fz-big, #forge .fz-work.aw .fz-big .tslot, #forge .fz-work.aw .fz-card .fg-slot, #forge .fz-work.aw .fz-card .fg-core { width: 72px; height: 72px; }
#forge .fz-work.aw { gap: 4px; }
#forge .fz-work.aw .fz-costh { margin-top: 1px; }
#forge .fz-work.aw .fz-spec { padding: 5px 10px; }
#forge .fz-work.aw .fz-all { padding-top: 0; padding-bottom: 0; }
#forge .fz-work.aw .fz-mat small { -webkit-line-clamp: 1; }
#forge .fz-work.aw .fz-core .tslot { width: 44px; height: 44px; }

/* the enhance list (js/economy.js fgGrid, 2026-10-19, the user: "ตอนตีบวกแสดงไห้เห็นว่าผู้เล่นกำลังใส่อุปกรณ์ชิ้นไหนอยู่"): the worn
   pieces under a green heading "สวมใส่อยู่", each with a green ring and a สวมอยู่ tag; the bag's under "ในกระเป๋า" */
#ui .fg-grid .fg-ghead { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 2px 0 -2px; padding: 4px 10px; border-radius: 8px; font: 800 0.86rem/1.25 Mali, sans-serif; color: #f6dc98; background: rgba(217, 164, 67, 0.14); }
#ui .fg-grid .fg-ghead.worn { color: #b8f5b0; background: rgba(110, 200, 100, 0.16); }
#ui .fg-grid .fg-ghead small { font: 600 0.74rem Mali, sans-serif; color: #c4b690; }
#ui .fg-grid .eco-cell.worn::after { border-color: #7fe07a; }
#ui .fg-grid .eco-cell .fg-wtag { position: absolute; z-index: 4; left: 50%; bottom: 31%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; font: 800 10px/15px Mali, sans-serif; font-style: normal; white-space: nowrap; color: #0e2a10; background: #7fe07a; box-shadow: 0 0 0 1px #0e2a10; pointer-events: none; }
:root[data-booklight] #ui .fg-grid .fg-ghead { color: var(--bk-ink); }
:root[data-booklight] #ui .fg-grid .fg-ghead.worn { color: #1d6418; }
:root[data-booklight] #ui .fg-grid .fg-ghead small { color: var(--bk-ink2); }

/* หินออปชัน (2026-10-19, the user: "ระบบสกัดออปออกแบบทำให้เล่นง่ายและเข้าใจง่ายหน่อย และทำ ui ให้ดูง่ายด้วย"): js/forge.js viewOpt.
   Numbered steps, one-line rows of equal height (the Thai name left, the value right), the stone it gives / the stones that
   fit, old › new in green / red, the cost as small chips, one button. Colours from the page's variables (light skins too). */
#forge .fz-rn small i.bad { color: var(--fz-bad); }
#forge .fz-work.op { gap: 4px; padding-bottom: 8px; }
#forge .fz-ohead { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 0 2px; }
#forge .fz-ohead .fz-ic { width: 48px; height: 48px; }
#forge .fz-ohead .tslot { width: 48px; height: 48px; }
#forge .fz-ohead .fz-rn b { font-size: 16px; }
#forge .fz-dots { font-style: normal; letter-spacing: 1px; color: var(--fz-gold); }
#forge .fz-oh { display: flex; align-items: center; margin-top: 2px; }
#forge .fz-oh small { margin-left: auto; }
#forge .fz-n { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; background: var(--fz-gold); color: var(--fz-sheet); font: 800 12px/1 Fredoka, Mali, sans-serif; font-style: normal; }
#forge .fz-olist { display: flex; flex-direction: column; gap: 4px; }
#forge .fz-oline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 32px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 9px;
  text-align: left; background: var(--fz-panel); color: var(--fz-ink); font: 600 14px Mali, sans-serif; }
#forge button.fz-oline { cursor: pointer; }
#forge button.fz-oline:hover { background: var(--fz-sel); }
#forge .fz-oline.on { background: var(--fz-sel); box-shadow: inset 0 0 0 2px var(--fz-gold); }
#forge .fz-oline.x3 { grid-template-columns: minmax(0, 1fr) auto 62px; }
#forge .fz-oline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#forge .fz-oline > b { font: 700 14.5px Fredoka, Mali, sans-serif; text-align: right; white-space: nowrap; }
#forge .fz-oline > em { font: 700 12.5px Mali, sans-serif; font-style: normal; color: var(--fz-gold); text-align: right; white-space: nowrap; }
#forge .fz-sline { grid-template-columns: 28px minmax(0, 1fr) auto 26px 66px; gap: 8px; padding-left: 4px; }
#forge .fz-sline .tslot { width: 28px; height: 28px; }
#forge .fz-sline > small { font: 700 12px Fredoka, Mali, sans-serif; color: var(--fz-dim); text-align: right; }
#forge .fz-sline > em.up { color: var(--fz-good); } #forge .fz-sline > em.dn { color: var(--fz-bad); } #forge .fz-sline > em.eq { color: var(--fz-dim); }
#forge .fz-olist .fz-all { margin-top: -2px; padding-top: 0; padding-bottom: 0; }
#forge .fz-noston { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 9px; border: 1.5px dashed var(--fz-line); }
#forge .fz-noston span { font: 600 13px Mali, sans-serif; color: var(--fz-dim); }
#forge .fz-noston .fz-link { margin: 0; flex: none; }
#forge .fz-work.op .fz-coreno { margin: 0; font-size: 12px; }
/* the stone an extract gives */
#forge .fz-get { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border-radius: 12px; background: var(--fz-tint); box-shadow: inset 0 0 0 1px var(--fz-line); }
#forge .fz-get .fz-rn b { white-space: normal; }
/* old › new */
#forge .fz-cmp { display: flex; flex-direction: column; gap: 3px; }
#forge .fz-cmp .fz-st { grid-template-columns: minmax(0, 1fr) auto 16px auto 48px; }
#forge .fz-st b.dn, #forge .fz-st em.dn { color: var(--fz-bad); }
#forge .fz-st em.up { color: var(--fz-good); }
/* the cost: small chips in one row */
#forge .fz-use { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
#forge .fz-use > span { font: 800 13.5px Mali, sans-serif; color: var(--fz-head); margin-right: 2px; }
#forge .fz-mini { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 3px; border: 0; border-radius: 99px; cursor: pointer; background: var(--fz-panel); color: var(--fz-ink); }
#forge .fz-mini:hover { background: var(--fz-sel); }
#forge .fz-mini .tslot { width: 30px; height: 30px; }
#forge .fz-mini b { font: 800 14px Fredoka, Mali, sans-serif; color: var(--fz-ink); }
#forge .fz-mini small { font: 600 12px Mali, sans-serif; color: var(--fz-dim); white-space: nowrap; }
#forge .fz-mini.short b { color: var(--fz-bad); }
#forge .fz-mini.short .tslot { border-radius: 7px; box-shadow: 0 0 0 2px var(--fz-bad); }
/* CP next to the button; the second tap of an extract */
#forge .fz-cpbig { min-width: 104px; }
#forge .fz-cpbig b { font-size: 26px; }
#forge .fz-cpbig b.eq { color: var(--fz-dim); font-size: 20px; }
#forge .fz-cpbig em { color: var(--fz-dim); }
#forge .fz-go.sure { filter: hue-rotate(-40deg) saturate(1.3); }
#forge .fz-go.sure b, #forge .fz-go.sure small { filter: hue-rotate(40deg); }
#forge .fz-work.op .fz-foot { padding-top: 4px; }
#forge .fz-work.op .fz-warn { max-width: 140px; }
/* the whole piece (the head icon) */
#forge .fz-pdet { top: 0; max-height: 100%; overflow-y: auto; box-sizing: border-box; }
#forge .fz-pdet .ci-pop-item { color: var(--fz-ink); }
/* the pieces a list leaves out (the user: "ทำไมถึงเห็นของที่จะออปแค่นี้"): one dashed line with the count and why, then greyed
   rows whose pill is the missing step (a tap goes there) */
#forge .fz-rest { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#forge .fz-rest-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 12px; box-sizing: border-box; border: 1.5px dashed var(--fz-line); border-radius: 10px;
  background: none; cursor: pointer; text-align: left; color: var(--fz-dim); font: 600 13px/1.3 Mali, sans-serif; }
#forge .fz-rest-h:hover { background: var(--fz-panel); }
#forge .fz-rest-h span { flex: 1; min-width: 0; }
#forge .fz-rest-h b { color: var(--fz-ink); }
#forge .fz-rest-h i { flex: none; font-style: normal; font-weight: 700; color: var(--fz-gold); }
#forge .fz-row.off { min-height: 56px; background: none; box-shadow: inset 0 0 0 1px var(--fz-line); }
#forge .fz-row.off:hover:not(:disabled) { background: var(--fz-panel); }
#forge .fz-row.off:disabled { cursor: default; }
#forge .fz-row.off .fz-ic { opacity: 0.6; filter: grayscale(0.6); }