/* =====================================================================
   The craft page in MIR4's crafting layout (2026-10-16, the user: "ระบบคราฟเอาแบบMir4", references ref/feedback/mir4_craft_*):
   js/craft.js Craft.tabHtml (.m4-*), and the material card of js/matinfo.js (.mi-*).
   .tslot is an icon in its tier's polished metal frame (the item slots' art: assets/ui_book/metal/frame_g*.png round the
   glossy plate assets/ui_book/plates/plate_g*.png), the same everywhere: gear by its grade, everything else by
   MatInfo.tierOf. Book pieces come from the skin (var(--uib-*)), so every book style keeps its own look.
   ===================================================================== */
.tslot { position: relative; display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; box-sizing: border-box;
  background: var(--mf) center / 100% 100% no-repeat; }
.tslot::before { content: ''; position: absolute; inset: 11.5%; border-radius: 5%; background: var(--mi) center / 100% 100% no-repeat; }
.tslot > img { position: relative; z-index: 2; width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.tslot.g0 { --mf: url(../assets/ui_book/metal/frame_g0.png); --mi: url(../assets/ui_book/plates/plate_g0.png); }
.tslot.g1 { --mf: url(../assets/ui_book/metal/frame_g1.png); --mi: url(../assets/ui_book/plates/plate_g1.png); }
.tslot.g2 { --mf: url(../assets/ui_book/metal/frame_g2.png); --mi: url(../assets/ui_book/plates/plate_g2.png); }
.tslot.g3 { --mf: url(../assets/ui_book/metal/frame_g3.png); --mi: url(../assets/ui_book/plates/plate_g3.png); }
.tslot.g4 { --mf: url(../assets/ui_book/metal/frame_g4.png); --mi: url(../assets/ui_book/plates/plate_g4.png); }
.tslot.g5 { --mf: url(../assets/ui_book/metal/frame_g5.png); --mi: url(../assets/ui_book/plates/plate_g5.png); filter: drop-shadow(0 0 3px rgba(255, 70, 90, 0.55)); }
/* (mythic: slow light rays behind the icon, like the bag's mythic slots) */
.tslot .ts-rays { position: absolute; inset: 11.5%; z-index: 1; overflow: hidden; border-radius: 5%; pointer-events: none; }
.tslot .ts-rays::before { content: ''; position: absolute; left: -30%; top: -30%; width: 160%; height: 160%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 160, 0.42) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%); mask: radial-gradient(circle, #000 12%, transparent 60%); animation: tsSpin 16s linear infinite; }
@keyframes tsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tslot .ts-rays::before { animation: none; } }

/* =====================================================================
   The material card (js/matinfo.js MatInfo.pop, any [data-info]): where it comes from and what it is used for
   ===================================================================== */
#itempop.mi-pop .ip-in.mi-in { width: min(820px, 94vw); max-height: 86vh; gap: 8px; padding: 14px 16px 14px; }
#itempop .mi-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
#itempop .mi-head .tslot.big { width: 74px; height: 74px; }
#itempop .mi-ht { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#itempop .mi-ht > b { font: 800 1.2rem/1.25 Mali, sans-serif; color: var(--gc); }
#itempop .mi-ht > small { font: 500 0.82rem/1.5 Mali, sans-serif; color: #cfc7b3; }
#itempop .mi-meta { display: flex; flex-wrap: wrap; gap: 4px; }
#itempop .mi-meta i { padding: 0 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); font: 600 0.76rem/1.6 Mali, sans-serif; font-style: normal; color: #d9cfb6; }
#itempop .mi-meta i b { color: #ffe08a; }
#itempop .mi-meta .mi-grade { color: var(--gc); box-shadow: inset 0 0 0 1.5px var(--gc); font-weight: 800; }
#itempop .mi-sb { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid rgba(217, 164, 67, 0.55); background: rgba(10, 9, 8, 0.5); }
#itempop .mi-sb > img { width: 40px; height: 40px; }
#itempop .mi-sb > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#itempop .mi-sb b { color: #ffd98a; font: 700 0.95rem Mali, sans-serif; }
#itempop .mi-sb small { color: #cfc7b3; font: 500 0.78rem/1.4 Mali, sans-serif; }
#itempop .mi-sb em { color: #8fe08a; font: 600 0.78rem Mali, sans-serif; font-style: normal; }
#itempop .mi-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 720px) { #itempop .mi-cols { grid-template-columns: 1fr; } }
#itempop .mi-sec { display: flex; flex-direction: column; gap: 5px; padding: 0 0 7px; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); }
#itempop .mi-sec h6 { margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; font: 800 0.95rem/1.2 Mali, sans-serif; color: #f6dc98; background: rgba(217, 164, 67, 0.15); }
#itempop .mi-sec h6 small { font: 600 0.72rem Mali, sans-serif; color: #b9ab88; }
#itempop .mi-use h6 { color: #a8f0a0; background: rgba(110, 200, 100, 0.13); }
#itempop .mi-none { margin: 4px 12px; font: 600 0.8rem Mali, sans-serif; color: #a89c80; }
#itempop .mi-row { display: flex; flex-direction: column; gap: 3px; margin: 0 6px; }
#itempop .mi-rh { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05); color: #efe4c8; text-align: left; cursor: pointer; }
#itempop .mi-rh:hover:not(:disabled) { background: rgba(255, 210, 120, 0.13); }
#itempop .mi-rh:disabled { cursor: default; }
#itempop .mi-rh img { width: 30px; height: 30px; object-fit: contain; }
#itempop .mi-rh span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#itempop .mi-rh b { font: 700 0.86rem/1.3 Mali, sans-serif; color: #ffe2a0; }
#itempop .mi-use .mi-rh b { color: #c9f5c0; }
#itempop .mi-rh small { font: 500 0.75rem/1.45 Mali, sans-serif; color: #c9bfa6; }
#itempop .mi-rh em { font: 700 0.78rem Mali, sans-serif; font-style: normal; color: #ffd36e; white-space: nowrap; }
#itempop .mi-tag { margin-left: 6px; padding: 0 6px; border-radius: 7px; background: rgba(255, 211, 110, 0.16); color: #ffd36e; font: 700 0.66rem/1.5 Mali, sans-serif; font-style: normal; vertical-align: 1px; }
#itempop .mi-use .mi-tag { background: rgba(140, 230, 130, 0.16); color: #9be890; }
#itempop .mi-maps { display: flex; flex-direction: column; gap: 3px; margin-left: 22px; padding-left: 8px; border-left: 2px solid rgba(217, 164, 67, 0.3); }
#itempop .mi-map { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; padding: 3px 4px; border-radius: 7px; }
#itempop .mi-map.rec { background: rgba(120, 220, 110, 0.1); box-shadow: inset 0 0 0 1px rgba(120, 220, 110, 0.35); }
#itempop .mi-mapn { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 8px; border: 0; border-radius: 8px; background: rgba(95, 180, 255, 0.14); color: #bfe0ff; cursor: pointer; }
#itempop .mi-mapn:hover { background: rgba(95, 180, 255, 0.28); }
#itempop .mi-mapn b { font: 700 0.8rem/1.5 Mali, sans-serif; color: #d6ecff; }
#itempop .mi-mapn i, #itempop .mi-mob i { font: 600 0.68rem Fredoka, sans-serif; font-style: normal; color: #9fb8cc; }
#itempop .mi-mapn em { padding: 0 5px; border-radius: 6px; background: #3f8f3a; color: #f1ffe8; font: 700 0.64rem/1.5 Mali, sans-serif; font-style: normal; }
#itempop .mi-map > small { font: 600 0.7rem Mali, sans-serif; color: #b9ab88; }
#itempop .mi-mobs { display: flex; flex-wrap: wrap; gap: 3px; }
#itempop .mi-mob { display: inline-flex; align-items: baseline; gap: 3px; padding: 0 6px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.06); color: #e9dcc0; font: 600 0.72rem/1.6 Mali, sans-serif; cursor: pointer; }
#itempop .mi-mob:hover { background: rgba(255, 120, 100, 0.2); }
#itempop .mi-mobs > small { font: 600 0.7rem Mali, sans-serif; color: #a89c80; align-self: center; }
#itempop .mi-more summary { cursor: pointer; padding: 2px 4px; font: 700 0.74rem Mali, sans-serif; color: #ffd36e; }
#itempop .mi-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 30px; }
#itempop .mi-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: #efe4c8; font: 600 0.74rem/1.6 Mali, sans-serif; cursor: pointer; }
#itempop .mi-chip img { width: 20px; height: 20px; object-fit: contain; }
#itempop .mi-chip:hover { background: rgba(255, 210, 120, 0.18); }
/* the bag's own item page shows the same lists */
#eco .mi-sec { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 0 0 6px; border-radius: 9px; overflow: hidden; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); }
#eco .mi-sec h6 { margin: 0; display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; font: 800 14px/1.2 Mali, sans-serif; color: #f6dc98; background: rgba(217, 164, 67, 0.14); }
#eco .mi-sec h6 small { font: 600 11px Mali, sans-serif; color: #b9ab88; }
#eco .mi-row { display: flex; flex-direction: column; gap: 3px; margin: 0 5px; }
#eco .mi-rh { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 5px 7px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.05); color: #efe4c8; text-align: left; cursor: pointer; }
#eco .mi-rh img { width: 28px; height: 28px; object-fit: contain; }
#eco .mi-rh span { min-width: 0; display: flex; flex-direction: column; }
#eco .mi-rh b { font: 700 13px/1.3 Mali, sans-serif; color: #ffe2a0; }
#eco .mi-rh small { font: 500 11.5px/1.4 Mali, sans-serif; color: #c9bfa6; }
#eco .mi-rh em { font: 700 12px Mali, sans-serif; font-style: normal; color: #ffd36e; }
#eco .mi-tag { margin-left: 5px; padding: 0 5px; border-radius: 6px; background: rgba(255, 211, 110, 0.16); color: #ffd36e; font: 700 10px/1.5 Mali, sans-serif; font-style: normal; }
#eco .mi-maps { display: flex; flex-direction: column; gap: 2px; margin-left: 18px; padding-left: 6px; border-left: 2px solid rgba(217, 164, 67, 0.3); }
#eco .mi-map { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; }
#eco .mi-mapn, #eco .mi-mob, #eco .mi-chip { display: inline-flex; align-items: baseline; gap: 3px; padding: 0 6px; border: 0; border-radius: 7px; background: rgba(95, 180, 255, 0.14); color: #d6ecff; font: 600 11.5px/1.6 Mali, sans-serif; cursor: pointer; }
#eco .mi-mob, #eco .mi-chip { background: rgba(255, 255, 255, 0.06); color: #e9dcc0; }
#eco .mi-mapn i, #eco .mi-mob i { font: 600 10px Fredoka, sans-serif; font-style: normal; color: #9fb8cc; }
#eco .mi-mapn em { padding: 0 4px; border-radius: 5px; background: #3f8f3a; color: #f1ffe8; font: 700 9.5px/1.5 Mali, sans-serif; font-style: normal; }
#eco .mi-map > small, #eco .mi-mobs > small { font: 600 10.5px Mali, sans-serif; color: #b9ab88; }
#eco .mi-mobs, #eco .mi-chips { display: flex; flex-wrap: wrap; gap: 2px; }
#eco .mi-chip img { width: 18px; height: 18px; object-fit: contain; align-self: center; }
#eco .mi-more summary { cursor: pointer; font: 700 11px Mali, sans-serif; color: #ffd36e; }
#eco .mi-none { margin: 3px 10px; font: 600 12px Mali, sans-serif; color: #a89c80; }
/* (a material picture anywhere in a book window: tap for where to get it and what it makes, js/matinfo.js tagIn) */
#ui .bookwin .mi-auto { cursor: help; }
#ui .bookwin .mi-auto:hover { outline: 1.5px dashed rgba(255, 211, 110, 0.75); outline-offset: 1px; border-radius: 4px; }

/* ---------- the craft page, MIR4 layout (.m4-*) ---------- */
#ui #eco .eco-main:has(.m4-left), #ui #eco .eco-side:has(.m4-right) { overflow: hidden; gap: 0; padding-bottom: 0; }
#eco .m4 { --m4-ink: #fff1d2; --m4-ink2: #cdbb94; --m4-dim: #8f8064; --m4-panel: rgba(6, 5, 4, 0.5); --m4-line: rgba(217, 164, 67, 0.35); --m4-acc: #ffd36e;
  --m4-bad: #ff6a5a; --m4-chip: rgba(10, 8, 6, 0.74);
  position: relative; box-sizing: border-box; width: 100%; height: 648px; color: var(--m4-ink); font-family: Mali, Fredoka, sans-serif; }
:root[data-booklight] #eco .m4 { --m4-ink: var(--bk-ink, #3a2410); --m4-ink2: var(--bk-ink2, #6a4a26); --m4-dim: color-mix(in srgb, var(--bk-ink2, #6a4a26) 70%, transparent);
  --m4-panel: color-mix(in srgb, var(--bk-acc, #b07a2a) 8%, rgba(255, 253, 248, 0.55)); --m4-line: color-mix(in srgb, var(--bk-acc, #b07a2a) 40%, transparent);
  --m4-acc: var(--bk-acc, #b07a2a); --m4-bad: #c0281a; --m4-chip: rgba(255, 252, 244, 0.88); }
#eco .m4 button { font-family: inherit; }
#eco .m4 button:focus-visible, #eco .m4 input:focus-visible { outline: 2px solid #ffe395; outline-offset: 2px; }
#eco .m4-left { display: flex; flex-direction: column; }
/* top bar: back + the three main tabs */
#eco .m4-top { flex: none; display: flex; align-items: stretch; gap: 6px; height: 42px; border-bottom: 1px solid var(--m4-line); }
#eco .m4-back { width: 40px; flex: none; border: 0; border-radius: 8px; background: var(--m4-chip); box-shadow: inset 0 0 0 1px var(--m4-line); color: var(--m4-acc); font: 800 28px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .m4-main { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#eco .m4-main button { position: relative; border: 0; background: none; color: var(--m4-dim); font: 700 14.5px/1.15 Mali, sans-serif; cursor: pointer; padding: 0 4px; }
#eco .m4-main button.on { color: var(--m4-ink); text-shadow: 0 0 8px color-mix(in srgb, var(--m4-acc) 60%, transparent); }
#eco .m4-main button.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; border-radius: 2px; background: var(--m4-acc); box-shadow: 0 0 6px var(--m4-acc); }
/* the second row: kinds */
#eco .m4-sub { flex: none; display: flex; height: 36px; border-bottom: 1px solid var(--m4-line); }
#eco .m4-sub button { flex: 1 1 0; min-width: 0; position: relative; border: 0; border-right: 1px solid var(--m4-line); background: none; color: var(--m4-dim); font: 700 13px/1.1 Mali, sans-serif; cursor: pointer; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eco .m4-sub button:last-child { border-right: 0; }
#eco .m4-sub button.long { font-size: 11px; }
#eco .m4-sub button.on { color: var(--m4-ink); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--m4-acc) 26%, transparent)); }
#eco .m4-sub button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--m4-acc); box-shadow: 0 0 6px var(--m4-acc); }
#eco .m4-main button:hover, #eco .m4-sub button:hover, #eco .m4-tier:hover { filter: brightness(1.15); }
/* the body: tier column + grid */
#eco .m4-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 86px minmax(0, 1fr); }
#eco .m4-tiers { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 0 44px; border-right: 1px solid var(--m4-line); }
#eco .m4-tier { position: relative; height: 62px; display: flex; align-items: center; padding: 0 0 0 12px; border: 0; background: none; color: var(--m4-ink2); text-align: left; cursor: pointer; font: 700 15px/1.1 Mali, sans-serif; }
#eco .m4-tier::before { content: ''; position: absolute; left: 3px; top: 20px; bottom: 20px; width: 3px; border-radius: 2px; background: var(--gc); opacity: 0.85; }
#eco .m4-tier.none { color: var(--m4-dim); opacity: 0.6; }
#eco .m4-tier.on { color: var(--m4-ink); background: url(../assets/ui_craft/m4/tier_on.png) left center / 100% 100% no-repeat, linear-gradient(90deg, color-mix(in srgb, var(--m4-acc) 32%, transparent), transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--m4-acc) 70%, transparent); }
#eco .m4-tier.on::before { top: 12px; bottom: 12px; width: 4px; box-shadow: 0 0 6px var(--gc); }
#eco .m4-cnt { position: absolute; right: 6px; top: 8px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #e8203c; color: #fff; font: 800 11px/17px Fredoka, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 1.5px #fff4d8; }
#eco .m4-can { position: absolute; left: 6px; right: 4px; bottom: 6px; display: flex; align-items: center; gap: 6px; cursor: pointer; font: 700 14px Mali, sans-serif; color: var(--m4-ink); }
#eco .m4-can input { width: 18px; height: 18px; accent-color: #e9b14a; margin: 0; }
#eco .m4-gridwrap { min-width: 0; display: flex; flex-direction: column; }
#eco .m4-sets { flex: none; display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; }
#eco .m4-sets em { font: 700 12px Mali, sans-serif; font-style: normal; color: var(--m4-ink2); margin-right: 2px; }
#eco .m4-sets button { width: 28px; height: 24px; border: 1px solid var(--m4-line); border-radius: 6px; background: var(--m4-chip); color: var(--m4-ink); font: 700 13px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .m4-sets button.on { background: linear-gradient(#ffe39a, #e9b14a); color: #2a1a02; border-color: #fff0c0; box-shadow: 0 0 6px rgba(255, 196, 80, 0.6); }
#eco .m4-sets button.lock { opacity: 0.55; }
#eco .m4-sets small { margin-left: auto; font: 600 11px Mali, sans-serif; color: var(--m4-ink2); }
#eco .m4-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(4, 90px); grid-auto-rows: 90px; gap: 9px; align-content: start; justify-content: center; padding: 6px 6px 10px;
  scrollbar-width: thin; scrollbar-color: #c9973c rgba(0, 0, 0, 0.25); overscroll-behavior: contain; }
#eco .m4-tile { width: 90px; height: 90px; padding: 0; border: 0; cursor: pointer; }
#eco .m4-tile > img { width: 72%; height: 72%; }
#eco .m4-tile.empty { cursor: default; border-radius: 8px; background: var(--m4-panel); box-shadow: inset 0 0 0 1px var(--m4-line); opacity: 0.55; }
#eco .m4-tile.sel { outline: 3px solid #fff4d0; outline-offset: -2px; border-radius: 10px; box-shadow: 0 0 10px 2px rgba(255, 240, 190, 0.75); }
#eco .m4-tile.locked > img { filter: grayscale(0.6) brightness(0.7); }
#eco .m4-tile:hover:not(.empty) { filter: brightness(1.12); }
#eco .m4-num { position: absolute; left: 11%; bottom: 9%; z-index: 4; font: 900 19px/1 'Times New Roman', Georgia, serif; font-style: normal; color: #fff;
  text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008, 0 2px 2px rgba(0, 0, 0, 0.6); letter-spacing: -1px; }
#eco .m4-equip { position: absolute; left: 4%; top: 6%; z-index: 5; padding: 0 10px 0 6px; height: 17px; background: url(../assets/ui_craft/m4/equip.png) center / 100% 100% no-repeat;
  color: #fff; font: 800 10px/17px Fredoka, sans-serif; font-style: normal; letter-spacing: 0.3px; text-shadow: 0 1px 0 rgba(80, 30, 0, 0.8); }
#eco .m4-own { position: absolute; right: 9%; bottom: 8%; z-index: 4; padding: 0 4px; border-radius: 6px; background: rgba(12, 8, 4, 0.78); color: #fff4d6; font: 700 10.5px/1.4 Fredoka, Mali, sans-serif; font-style: normal; }
#eco .m4-lock { position: absolute; right: 8%; top: 7%; z-index: 4; font-size: 13px; font-style: normal; }
#eco .m4-none { grid-column: 1 / -1; margin: 40px 10px; text-align: center; font: 700 14px/1.6 Mali, sans-serif; color: var(--m4-ink2); }
#eco .m4-none small { font-weight: 600; font-size: 12px; }
#eco .m4-forge { grid-column: 1 / -1; margin: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#eco .m4-forge img { width: 80px; height: 80px; object-fit: contain; }
#eco .m4-forge b { font: 800 18px Mali, sans-serif; }
#eco .m4-forge small { font: 600 12.5px/1.5 Mali, sans-serif; color: var(--m4-ink2); }
#eco .m4-service { position: absolute; right: 4px; bottom: 2px; }
#eco .m4-service .btn { padding: 2px 8px; font-size: 11px; }

/* the right page */
#eco .m4-right { display: flex; flex-direction: column; align-items: center; }
#eco .m4-rtop { align-self: stretch; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 38px; }
#eco .m4-cur { display: flex; gap: 10px; }
#eco .m4-cur span { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 2px; height: 26px; border-radius: 13px; background: var(--m4-chip); box-shadow: inset 0 0 0 1px var(--m4-line); cursor: help; }
#eco .m4-cur img { width: 24px; height: 24px; object-fit: contain; }
#eco .m4-cur b { font: 700 13px Fredoka, Mali, sans-serif; color: var(--m4-ink); }
#eco .m4-help { width: 30px; height: 30px; border: 0; border-radius: 50%; background: url(../assets/ui_craft/m4/btn_round.png) center / 100% 100% no-repeat, #1b150e; color: #ffe6a0; font: 800 17px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .m4-enh { position: absolute; right: 2px; top: 44px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--m4-ink2); }
#eco .m4-enh img { width: 46px; height: 46px; padding: 7px; box-sizing: border-box; border-radius: 50%; background: url(../assets/ui_craft/m4/btn_round.png) center / 100% 100% no-repeat, #1b150e; object-fit: contain; }
#eco .m4-enh small { font: 700 11px Mali, sans-serif; }
#eco .m4-enh:hover img { filter: brightness(1.2); }
/* the dial: aura, the painted dial, the item in its tier disc, the numeral, the plaque */
#eco .m4-dialbox { position: relative; flex: none; width: 300px; height: 300px; margin-top: 2px; }
#eco .m4-aura { position: absolute; left: -30px; top: -30px; width: 360px; height: 360px; mix-blend-mode: screen; pointer-events: none; animation: m4Aura 9s ease-in-out infinite; }
@keyframes m4Aura { 0%, 100% { opacity: 0.75; transform: rotate(0deg) scale(1); } 50% { opacity: 1; transform: rotate(6deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { #eco .m4-aura { animation: none; } }
#eco .m4-dial { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#eco .m4-dial.miss { border-radius: 50%; background: #17120c; box-shadow: inset 0 0 0 6px #6b4b1c; }
#eco .m4-core { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: zoom-in; z-index: 2; }
#eco .m4-core .m4-num { left: 2px; bottom: 0; font-size: 24px; }
#eco .m4-plate { position: absolute; left: 50%; bottom: 46px; z-index: 3; transform: translateX(-50%); min-width: 170px; max-width: 280px; height: 40px; padding: 0 22px; box-sizing: border-box; display: grid; place-items: center;
  background: url(../assets/ui_craft/m4/plate.png) center / 100% 100% no-repeat; }
#eco .m4-plate b { font: 800 14px/1.15 Mali, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; text-shadow: 0 1px 2px #000; }
#eco .m4-stem { position: absolute; left: 50%; bottom: -16px; width: 2px; height: 22px; margin-left: -1px; background: linear-gradient(#ffe8a8, #c9973c); }
#eco .m4-stem::before { content: ''; position: absolute; left: -5px; top: -4px; border: 6px solid transparent; border-bottom: 7px solid #ffe8a8; border-top: 0; }
/* round slots: the tier's disc in the gold ring (assets/ui_craft/m4/disc_g*, ring_g*: Codex art recoloured per tier) */
#eco .m4-circ { position: relative; display: inline-grid; place-items: center; width: 74px; height: 74px; flex: none; }
#eco .m4-circ.big { width: 104px; height: 104px; }
#eco .m4-circ > .m4-disc, #eco .m4-circ > .m4-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
#eco .m4-circ > .m4-disc { inset: 5%; background: var(--md) center / 100% 100% no-repeat; }
#eco .m4-circ > .m4-ring { z-index: 3; background: var(--mr) center / 100% 100% no-repeat; }
#eco .m4-circ > img { position: relative; z-index: 2; width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
#eco .m4-circ.g0 { --md: url(../assets/ui_craft/m4/disc_g0.png); --mr: url(../assets/ui_craft/m4/ring_g0.png); }
#eco .m4-circ.g1 { --md: url(../assets/ui_craft/m4/disc_g1.png); --mr: url(../assets/ui_craft/m4/ring_g1.png); }
#eco .m4-circ.g2 { --md: url(../assets/ui_craft/m4/disc_g2.png); --mr: url(../assets/ui_craft/m4/ring_g2.png); }
#eco .m4-circ.g3 { --md: url(../assets/ui_craft/m4/disc_g3.png); --mr: url(../assets/ui_craft/m4/ring_g3.png); }
#eco .m4-circ.g4 { --md: url(../assets/ui_craft/m4/disc_g4.png); --mr: url(../assets/ui_craft/m4/ring_g4.png); }
#eco .m4-circ.g5 { --md: url(../assets/ui_craft/m4/disc_g5.png); --mr: url(../assets/ui_craft/m4/ring_g5.png); }
#eco .m4-circ .m4-num { z-index: 4; left: 8%; bottom: 10%; font-size: 15px; }
/* the recipe: the slots joined by a line, a stem up to the dial */
#eco .m4-tree { position: relative; flex: none; display: flex; justify-content: center; gap: 14px; margin-top: 18px; padding-top: 4px; min-height: 118px; }
#eco .m4-line { position: absolute; top: 41px; left: 50%; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, #c9973c, #ffe8a8, #c9973c); }
#eco .m4-tree.n2 .m4-line { width: 100px; }
#eco .m4-tree.n3 .m4-line { width: 190px; }
#eco .m4-tree.n4 .m4-line { width: 290px; }
#eco .m4-tree.n5 .m4-line { width: 300px; }
#eco .m4-tree.n6 .m4-line { width: 370px; }
#eco .m4-tree::before { content: ''; position: absolute; left: 50%; top: -14px; width: 2px; height: 56px; margin-left: -1px; background: linear-gradient(#ffe8a8, #c9973c); }
#eco .m4-tree.n1::before { height: 18px; }
#eco .m4-slot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 82px; }
#eco .m4-tree.n5 .m4-slot, #eco .m4-tree.n6 .m4-slot { width: 68px; }
#eco .m4-tree.n5 .m4-circ, #eco .m4-tree.n6 .m4-circ { width: 64px; height: 64px; }
#eco .m4-tree.n5, #eco .m4-tree.n6 { gap: 6px; }
#eco .m4-tree.n5 .m4-line, #eco .m4-tree.n6 .m4-line { top: 36px; }
/* seven: the lower-grade base piece beside six materials (js/craft.js, 2026-10-17) */
#eco .m4-tree.n7 { gap: 3px; }
#eco .m4-tree.n7 .m4-slot { width: 60px; }
#eco .m4-tree.n7 .m4-circ { width: 56px; height: 56px; }
#eco .m4-tree.n7 .m4-line { width: 380px; top: 32px; }
#eco .m4-ing { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--m4-ink); }
#eco .m4-ing:hover .m4-circ { filter: brightness(1.15); }
#eco .m4-hn { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 4; text-align: center; font: 800 12.5px/1 Fredoka, Mali, sans-serif; color: #fff;
  text-shadow: 1px 0 0 #120a04, -1px 0 0 #120a04, 0 1px 0 #120a04, 0 -1px 0 #120a04; }
#eco .m4-hn.short { color: #ff5a4a; }
#eco .m4-in { max-width: 100%; text-align: center; font: 700 12px/1.15 Mali, sans-serif; overflow-wrap: anywhere; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); }
#eco .m4-in.l { font-size: 10.5px; }
#eco .m4-in.xl { font-size: 9.5px; letter-spacing: -0.2px; }
:root[data-booklight] #eco .m4-in { text-shadow: 1px 0 0 rgba(30, 18, 8, 0.7), -1px 0 0 rgba(30, 18, 8, 0.7), 0 1px 0 rgba(30, 18, 8, 0.7), 0 -1px 0 rgba(30, 18, 8, 0.7); }
#eco .m4-swap { position: absolute; right: 0; top: -4px; z-index: 6; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: url(../assets/ui_craft/m4/swap.png) center / 100% 100% no-repeat, #1b150e; }
#eco .m4-swap:hover { filter: brightness(1.2); }
#eco .m4-note { flex: none; margin: 4px 14px 0; text-align: center; font: 600 11px/1.45 Mali, sans-serif; color: var(--m4-ink2); }
/* the count bar */
#eco .m4-qty { position: relative; flex: none; display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 4px 6px; border-radius: 8px; background: var(--m4-panel); box-shadow: inset 0 0 0 1px var(--m4-line); }
#eco .m4-qty > button { width: 34px; height: 30px; border: 0; border-radius: 6px; background: var(--m4-chip); box-shadow: inset 0 0 0 1px var(--m4-line); color: var(--m4-ink); font: 800 17px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .m4-qty > button[data-v="max"] { width: 48px; font-size: 13px; }
#eco .m4-qty > button:disabled { opacity: 0.45; cursor: default; }
#eco .m4-qty > button.on { box-shadow: inset 0 0 0 2px var(--m4-acc); }
#eco .m4-qty > b { min-width: 74px; text-align: center; font: 800 18px Fredoka, sans-serif; color: var(--m4-ink); }
#eco .m4-qty > b.short { color: var(--m4-bad); }
#eco .m4-pad { position: absolute; right: 0; bottom: 38px; z-index: 8; display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; padding: 6px; border-radius: 8px; background: rgba(14, 10, 6, 0.95); box-shadow: 0 0 0 1px var(--m4-line), 0 6px 14px rgba(0, 0, 0, 0.5); }
#eco .m4-pad button { height: 30px; border: 0; border-radius: 6px; background: #2a2016; color: #ffe6a0; font: 700 14px Fredoka, sans-serif; cursor: pointer; }
#eco .m4-pad button:disabled { opacity: 0.35; }
/* cost + สร้าง */
#eco .m4-costrow { align-self: stretch; flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 2px 0; padding-top: 6px; border-top: 1px solid var(--m4-line); }
#eco .m4-cost { flex: 1; display: flex; gap: 14px; justify-content: center; }
#eco .m4-cost span { display: inline-flex; align-items: center; gap: 5px; font: 800 16px Fredoka, Mali, sans-serif; color: var(--m4-ink); }
#eco .m4-cost span.short { color: var(--m4-bad); }
#eco .m4-cost img { width: 26px; height: 26px; object-fit: contain; }
#eco .m4-build { width: 176px; height: 54px; flex: none; border: 0; cursor: pointer; background: url(../assets/ui_craft/m4/btn_build.png) center / 100% 100% no-repeat; }
#eco .m4-build b { font: 800 21px/1 Mali, sans-serif; color: #ffe6a0; text-shadow: 0 1px 2px #000, 0 0 8px rgba(255, 200, 90, 0.5); }
#eco .m4-build:hover:not(:disabled) { filter: brightness(1.15); }
#eco .m4-build:disabled { filter: grayscale(0.85) brightness(0.8); cursor: default; }
#eco .m4-why { flex: none; margin-top: 2px; font: 600 11px Mali, sans-serif; color: var(--m4-bad); }
#eco .m4-empty { margin: auto; font: 700 15px Mali, sans-serif; color: var(--m4-ink2); }
/* the cards of ? and the dial's item */
#itempop .m4-card { width: min(520px, 92vw); }
#itempop .m4-h { margin: 0 0 6px; font: 800 1.1rem Mali, sans-serif; color: #ffd98a; }
#itempop .m4-help-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font: 500 0.86rem/1.55 Mali, sans-serif; color: #e3d7bb; }
#itempop .m4-help-list b { color: #ffe08a; }
#itempop .m4-stats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
#itempop .m4-stats li { display: flex; align-items: baseline; gap: 6px; font: 600 0.86rem Mali, sans-serif; color: #d9cfb6; }
#itempop .m4-stats b { margin-left: auto; color: #8fe08a; font-family: Fredoka, sans-serif; }
#itempop .m4-stats em { font-style: normal; font-size: 0.72rem; color: #a99a7a; }
/* (the bag's cells: a step II-IV numeral, economy.js cell) */
#ui .bookwin .eco-cell .stp { position: absolute; left: 10%; bottom: 8%; z-index: 4; font: 900 13px/1 'Times New Roman', Georgia, serif; font-style: normal; color: #fff;
  text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008; pointer-events: none; }
/* (after the first look: the tier names clear of the highlight's diamond; "สร้างได้" on one line) */
#eco .m4-tier { padding-left: 24px; }
#eco .m4-tier::before { left: 10px; }
#eco .m4-tier.on { background-size: 100% 100%, 100% 100%; background-position: -16px center, 0 0; }
#eco .m4-can { left: 4px; right: 0; gap: 4px; font-size: 13px; white-space: nowrap; }
#eco .m4-plate { min-width: 180px; max-width: 250px; padding: 0 26px; }
#eco .m4-plate b { font-size: 13px; max-width: 200px; }
#eco .m4-core .m4-num { left: -10px; bottom: 22px; }
#eco .m4-in { color: var(--m4-ink); }

/* (2026-10-16, the user: "ปัญหาคือภาพขาด"): the body's one row was as tall as its content, so the grid never scrolled and its
   lower rows ran under the book's edge and the back button; the row now fits the page and the grid scrolls inside it */
#eco .m4-body { grid-template-rows: minmax(0, 1fr); }
#eco .m4-gridwrap { min-height: 0; }
#eco .m4-grid { grid-auto-rows: auto; }
/* the weapon tab's strip of weapon kinds by class (★ the class in hand), the user: "แยกอาชีพของอาวุธ / เลือกชนิดของอาวุธได้" */
#eco .m4-wpns { flex: none; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 2px 8px 6px; scrollbar-width: thin; scrollbar-color: #c9973c rgba(0, 0, 0, 0.25); }
#eco .m4-wpn { position: relative; flex: none; width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
  border: 0; border-radius: 8px; background: var(--m4-chip); box-shadow: inset 0 0 0 1px var(--m4-line); color: var(--m4-ink2); cursor: pointer; }
#eco .m4-wpn img { width: 32px; height: 32px; object-fit: contain; }
#eco .m4-wpn small { max-width: 54px; font: 700 9.5px/1.1 Mali, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eco .m4-wpn:hover { filter: brightness(1.15); }
#eco .m4-wpn.on { color: #2a1a02; background: linear-gradient(#ffe39a, #e9b14a); box-shadow: 0 0 0 2px #fff0c0, 0 0 8px rgba(255, 196, 80, 0.6); }
#eco .m4-wpn.mine::after { content: '★'; position: absolute; top: 1px; right: 4px; font: 700 10px/1 sans-serif; color: #ffd36e; }
#eco .m4-wpn.on.mine::after { color: #7a4a00; }
/* the grid's heads: 🐉 PvE over the left two columns, ⚔ PvP over the right two; each kind's name over its two rows */
#eco .m4-lnhead { grid-column: span 2; height: 22px; display: grid; place-items: center; border-radius: 6px; font: 700 12px/1 Mali, sans-serif; }
#eco .m4-lnhead.ln-e { color: #a6f2bb; background: rgba(31, 81, 48, 0.6); box-shadow: inset 0 0 0 1px #3f8f55; }
#eco .m4-lnhead.ln-p { color: #ffb4aa; background: rgba(107, 32, 32, 0.6); box-shadow: inset 0 0 0 1px #a5463c; }
#eco .m4-kind { grid-column: 1 / -1; height: 18px; padding-left: 2px; font: 700 12px/18px Mali, sans-serif; color: var(--m4-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-booklight] #eco .m4-lnhead.ln-e { color: #1d6b35; background: rgba(111, 211, 138, 0.25); }
:root[data-booklight] #eco .m4-lnhead.ln-p { color: #9a2a1e; background: rgba(255, 123, 107, 0.22); }

/* the bag card's "ชิ้นนี้ไปต่อได้" strip right under the name (js/economy.js nextBox, 2026-10-17: the full rows sat at the
   bottom of the page, out of sight): step-up / next grade / salvage / forge as chips, a ready step-up in green */
#ui .bookwin .eco-nextbox { margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(242, 193, 78, 0.08); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.45); }
#ui .bookwin .eco-nextbox > b { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font: 700 14px/1.2 'Mali', sans-serif; color: #ffe08a; }
#ui .bookwin .eco-nextbox > b img { width: 22px; height: 22px; object-fit: contain; }
#ui .bookwin .eco-nchips { display: flex; flex-wrap: wrap; gap: 5px; }
#ui .bookwin .eco-nchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.55); color: #f3e7c9; font: 600 13px 'Mali', sans-serif; }
#ui .bookwin .eco-nchip img { width: 20px; height: 20px; object-fit: contain; }
#ui .bookwin .eco-nchip em { font-style: normal; color: #ffd27a; }
#ui .bookwin .eco-nchip:hover { filter: brightness(1.15); }
#ui .bookwin .eco-nchip.ready { background: rgba(120, 220, 110, 0.18); box-shadow: inset 0 0 0 1px rgba(120, 220, 110, 0.75); color: #c9f5bd; }
:root[data-booklight] #ui .bookwin .eco-nextbox > b { color: var(--bk-acc); }
:root[data-booklight] #ui .bookwin .eco-nchip { background: color-mix(in srgb, var(--bk-acc) 9%, #fffdf8); color: var(--bk-ink); }
:root[data-booklight] #ui .bookwin .eco-nchip.ready { color: #2a6a18; }

/* the crafting level bar in the set row (js/craft.js lvBar, 2026-10-17): level, EXP, the next level that opens something */
#eco .m4-sets .m4-clv { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; cursor: help; }
#eco .m4-clv b { font: 700 12px Mali, sans-serif; color: var(--m4-ink); white-space: nowrap; }
#eco .m4-clv i { flex: none; width: 70px; height: 7px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px var(--m4-line); }
#eco .m4-clv i u { display: block; height: 100%; background: linear-gradient(90deg, #e9b14a, #ffe39a); }
#eco .m4-sets .m4-clv small { margin-left: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px Mali, sans-serif; color: var(--m4-ink2); }
#eco .m4-sets.m4-lvrow { justify-content: flex-end; }

/* "รวมขั้นอัตโนมัติ" on the right page's top bar (js/craft.js autoPill, 2026-10-17): a pill, gold with a count badge when pairs
   wait in the bag */
#eco .m4-rtop .m4-auto { flex: none; margin-right: auto; height: 26px; padding: 0 11px; border: 1px solid var(--m4-line); border-radius: 99px; background: var(--m4-chip); color: var(--m4-ink2);
  font: 700 12.5px/1 Mali, sans-serif; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
#eco .m4-rtop .m4-auto.on { background: linear-gradient(#ffe39a, #e9b14a); color: #2a1a02; border-color: #fff0c0; box-shadow: 0 0 6px rgba(255, 196, 80, 0.55); }
#eco .m4-rtop .m4-auto b { min-width: 17px; padding: 0 4px; border-radius: 99px; background: #c0392b; color: #fff; font: 700 11px/16px Fredoka, sans-serif; text-align: center; }
#eco .m4-rtop .m4-auto:hover { filter: brightness(1.12); }

/* (2026-10-19, the user: "แก้เลเวลช่างให้ดูง่ายหน่อย"): the crafter's level on a row of its own - the level big on the left, the EXP
   written on a wide bar, what the next level opens under it */
#eco .m4-lvrow2 { margin: 2px 0 8px; }
#eco .m4-clv.m4-clv2 { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'lv bar' 'lv next'; align-items: center; column-gap: 10px; row-gap: 3px; margin: 0;
  padding: 6px 12px 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--m4-line); cursor: help; }
#eco .m4-clv2 .m4-clvl { grid-area: lv; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding-right: 10px; border-right: 1px solid var(--m4-line); }
#eco .m4-clv2 .m4-clvl small { font: 600 11px Mali, sans-serif; color: var(--m4-ink2); }
#eco .m4-clv2 .m4-clvl b { font: 800 19px Mali, sans-serif; color: #ffe39a; }
#eco .m4-clv2 .m4-clbar { grid-area: bar; position: relative; height: 18px; min-width: 0; }
#eco .m4-clv2 .m4-clbar i { position: absolute; inset: 0; width: auto; height: auto; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px var(--m4-line); }
#eco .m4-clv2 .m4-clbar i u { display: block; height: 100%; background: linear-gradient(90deg, #e9b14a, #ffe39a); }
#eco .m4-clv2 .m4-clbar em { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 Mali, sans-serif; font-style: normal; color: #fff;
  text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008; }
#eco .m4-clv2 .m4-clnext { grid-area: next; margin: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px Mali, sans-serif; color: var(--m4-ink2); }