/* =====================================================================
   UI System 1 (1 ต.ค. 2569 · จ๊อบตกลงทุกหัวข้อในหน้าร่าง tools/mockup/ui_system1.html แล้วสั่งขึ้นเซิฟทดลอง)
   ไฟล์นี้โหลดหลัง style.css · ถอดไฟล์นี้ออก = กลับหน้าตาเดิม
   ภาพทั้งหมดอยู่ assets/ui/v2/ (วาดด้วยโค้ด tools/mockup/make_ui_buttons.py, make_card_frames.py · กรอบการ์ดเจนจาก Gemini)
   กฎ: สีทึบ · หน้าสะอาด (คำอธิบายไปอยู่ตอนชี้) · หัวข้อตัวหนา 14 · ห้ามแสงวิ่งกับของเก่า
   ===================================================================== */

/* ---------- ปุ่มพิกเซล (ภาพ 9 ช่อง 12x12 ขยาย 2 เท่า) ---------- */
body[data-zone] .send, body[data-zone] .job, body[data-zone] #btn-auto, body[data-zone] #btn-warp, body[data-zone] #btn-newgame, body[data-zone] #btn-export, body[data-zone] #btn-import, body[data-zone] #btn-fullscreen, body[data-zone] .b2x {
  --img: url(../assets/ui/v2/ice_n.png); --img-h: url(../assets/ui/v2/ice_h.png); --img-p: url(../assets/ui/v2/ice_p.png);
  font-family: var(--pix) !important; letter-spacing: .5px; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  background: none !important; box-shadow: none !important; outline: none !important; clip-path: none !important; border-radius: 0 !important;
  border-style: solid !important; border-width: 6px 4px !important; border-color: transparent !important;
  border-image: var(--img) 3 2 3 2 fill / 6px 4px stretch !important; image-rendering: pixelated;
  color: #eef7fd !important; text-shadow: 1px 1px 0 #06101c; font-weight: normal !important;
  height: 30px; min-width: 0; padding: 0 10px 4px !important; font-size: 13px !important; line-height: 1 !important; opacity: 1 !important; filter: none !important;
}
body[data-zone] .send:hover:not(:disabled), body[data-zone] .job:hover:not(:disabled), body[data-zone] #btn-auto:hover, body[data-zone] #btn-warp:hover:not(:disabled), body[data-zone] #btn-newgame:hover, body[data-zone] #btn-export:hover, body[data-zone] #btn-import:hover, body[data-zone] #btn-fullscreen:hover { border-image-source: var(--img-h) !important; }
body[data-zone] .send:active:not(:disabled), body[data-zone] .job:active:not(:disabled), body[data-zone] #btn-auto:active, body[data-zone] #btn-warp:active:not(:disabled), body[data-zone] #btn-newgame:active, body[data-zone] #btn-export:active, body[data-zone] #btn-import:active, body[data-zone] #btn-fullscreen:active {
  border-image-source: var(--img-p) !important; padding-top: 2px !important; padding-bottom: 2px !important; transform: none !important; }
body[data-zone="desert"] .job, body[data-zone="desert"] #btn-auto, body[data-zone="desert"] #btn-warp, body[data-zone="desert"] #btn-newgame, body[data-zone="desert"] #btn-export, body[data-zone="desert"] #btn-import {
  --img: url(../assets/ui/v2/desert_n.png); --img-h: url(../assets/ui/v2/desert_h.png); --img-p: url(../assets/ui/v2/desert_p.png);
  color: #fff6e6 !important; text-shadow: 1px 1px 0 #1a0f06; }
/* หลัก: เขียว ใหญ่ */
body[data-zone] .send { --img: url(../assets/ui/v2/primary_n.png); --img-h: url(../assets/ui/v2/primary_h.png); --img-p: url(../assets/ui/v2/primary_p.png);
        height: 34px; min-width: 132px; padding: 0 16px 3px !important; font-size: 14px !important; color: #10240a !important; text-shadow: 1px 1px 0 #d4f7b4; }
/* เล็ก: แบน ขอบบาง */
body[data-zone] .job.tiny, body[data-zone] #btn-fullscreen, body[data-zone] .job.dismiss {
  --img: url(../assets/ui/v2/small_n.png); --img-h: url(../assets/ui/v2/small_h.png); --img-p: url(../assets/ui/v2/small_p.png);
  border-width: 3px 2px !important; border-image-width: 3px 2px !important; height: 22px; padding: 0 8px 1px !important; font-size: 11px !important; color: #b5cde0 !important; }
body[data-zone] .job.tiny:active:not(:disabled), body[data-zone] #btn-fullscreen:active { padding-top: 1px !important; padding-bottom: 0 !important; }
body[data-zone="desert"] .job.tiny, body[data-zone="desert"] #btn-fullscreen, body[data-zone="desert"] .job.dismiss {
  --img: url(../assets/ui/v2/small_d_n.png); --img-h: url(../assets/ui/v2/small_d_h.png); --img-p: url(../assets/ui/v2/small_d_p.png); color: #e8d6b8 !important; }
body[data-zone] .job.dismiss, body[data-zone] #btn-newgame { color: #ff9a80 !important; }
/* เปิดอยู่ / เลือกอยู่ = เขียว */
body[data-zone] .job.on, body[data-zone] .job.keep-on, body[data-zone] .job.auto.on, body[data-zone] #btn-auto.on {
  --img: url(../assets/ui/v2/toggle_on_n.png); --img-h: url(../assets/ui/v2/toggle_on_h.png); --img-p: url(../assets/ui/v2/toggle_on_p.png);
  color: #eef7fd !important; text-shadow: 1px 1px 0 #0b1a08; }
/* ปุ่มเปิด/ปิดตอนปิด = เทา */
body[data-zone] #btn-auto:not(.on), body[data-zone] .job.keep-toggle:not(.keep-on) {
  --img: url(../assets/ui/v2/off_n.png); --img-h: url(../assets/ui/v2/off_h.png); --img-p: url(../assets/ui/v2/off_p.png); color: #c3ccd8 !important; text-shadow: 1px 1px 0 #14181e; }
/* กดไม่ได้ = เทา */
body[data-zone] .send:disabled, body[data-zone] .job:disabled, body[data-zone] #btn-warp:disabled {
  --img: url(../assets/ui/v2/off_n.png) !important; --img-h: url(../assets/ui/v2/off_n.png) !important; --img-p: url(../assets/ui/v2/off_n.png) !important;
  color: #8794ab !important; text-shadow: 1px 1px 0 #14181e; cursor: not-allowed; }
/* จ๊อบ: ตัดไอคอนออกจากปุ่มทั้งหมด */
body[data-zone] .send > .ico, body[data-zone] .job > .ico, body[data-zone] .job > .twi, body[data-zone] #btn-auto > .ico, body[data-zone] #btn-warp > .ico { display: none !important; }

/* ---------- กล่องเลขปลายทาง: สีเดียว · ที่เลือก = ทึบทั้งปุ่ม ---------- */
body[data-zone] .node {
  --img: url(../assets/ui/v2/small_n.png); --img-h: url(../assets/ui/v2/small_h.png); --img-p: url(../assets/ui/v2/small_p.png);
  box-sizing: border-box; min-width: 30px; height: 28px; padding: 0 6px 3px !important; font: 13px/1 var(--pix) !important; color: #dcecf6 !important;
  text-shadow: 1px 1px 0 #06101c; display: inline-flex !important; align-items: center; justify-content: center;
  background: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important;
  border-style: solid !important; border-width: 6px 4px !important; border-color: transparent !important;
  border-image: var(--img) 3 2 3 2 fill / 6px 4px stretch !important; image-rendering: pixelated; font-weight: normal !important; }
body[data-zone] button.node:hover { border-image-source: var(--img-h) !important; }
body[data-zone] .node.on { --img: url(../assets/ui/v2/node_on_n.png); --img-h: url(../assets/ui/v2/node_on_h.png); --img-p: url(../assets/ui/v2/node_on_p.png);
           color: #0b1d2a !important; text-shadow: 1px 1px 0 #eefcff; }
body[data-zone="desert"] .node { --img: url(../assets/ui/v2/small_d_n.png); --img-h: url(../assets/ui/v2/small_d_h.png); --img-p: url(../assets/ui/v2/small_d_p.png); color: #f3e4c8 !important; text-shadow: 1px 1px 0 #1a0f06; }
body[data-zone="desert"] .node.on { --img: url(../assets/ui/v2/node_on_d_n.png); --img-h: url(../assets/ui/v2/node_on_d_h.png); --img-p: url(../assets/ui/v2/node_on_d_p.png); color: #2a1a0e !important; text-shadow: 1px 1px 0 #fff0c8; }
body[data-zone] .nodes.plain .node.done { filter: brightness(.7) !important; }

/* ---------- กรอบแผง: พิกเซลชุดเดียวกับปุ่ม · พื้นทึบ · หัวแผงแถบเข้ม ตัวหนา 14 ---------- */
/* 2 ต.ค.: ใช้ทุกขนาดจอ (เดิมเฉพาะจอ ≥ 1100 · มือถือได้กรอบเดียวกัน) · กรอบมุมมนอยู่ ui2_round.css */
  body[data-zone] main > section {
    background: none !important; box-shadow: 0 4px 0 rgba(0,0,0,.45) !important; border-radius: 0 !important; outline: none !important;
    border-style: solid !important; border-width: 6px !important; border-color: transparent !important;
    border-image: url(../assets/ui/v2/panel_ice.png) 3 fill / 6px stretch !important; image-rendering: pixelated; padding: 0 8px 10px !important; }
  body[data-zone="desert"] main > section { border-image-source: url(../assets/ui/v2/panel_desert.png) !important; }
  body[data-zone] main > section > h2, body[data-zone] #col-log > h2 {
    display: flex !important; align-items: center; justify-content: flex-start !important; align-self: stretch !important; width: auto !important; position: static !important; transform: none !important; gap: 8px; margin: 0 -8px 10px !important; padding: 6px 10px 5px !important;
    background: #0a1826; border-bottom: 2px solid #06101c; box-shadow: 0 2px 0 #2c5070;
    font: 700 14px/1.2 var(--pix) !important; letter-spacing: 2px !important; text-transform: uppercase; color: #e2f5ff !important; text-shadow: 1px 1px 0 #02060c; opacity: 1 !important; }
  body[data-zone="desert"] main > section > h2, body[data-zone="desert"] #col-log > h2 { background: #1e1208; border-bottom-color: #1a0f06; box-shadow: 0 2px 0 #6e5030; color: #fdebc6 !important; text-shadow: 1px 1px 0 #0a0502; }
  body[data-zone] main > section > h2::before, body[data-zone] main > section > h2::after, body[data-zone] #col-log > h2::before, body[data-zone] #col-log > h2::after { display: none !important; }
  body[data-zone] main > section > h2 .ico, body[data-zone] main > section > h2 img { width: 20px !important; height: 20px !important; margin: 0 !important; }
  /* ช่องคน: ไม่มีกรอบที่ตัว section เพราะแท็บต้องอยู่บนกรอบ · กรอบไปอยู่ที่หน้าแท็บแทน (แท็บแบบแฟ้ม) */
  body[data-zone] main > section#col-people { border: 0 !important; border-image: none !important; box-shadow: none !important; padding: 0 !important; background: none !important; }

/* ---------- แท็บแบบแฟ้ม: แท็บที่เลือกจมทับขอบบนของแผง 6 px แล้วมีมุมต่อเส้น ---------- */
body[data-zone] #col-people .tabs { display: flex !important; align-items: flex-end; gap: 2px !important; padding: 0 4px !important; margin: 0 0 -6px !important;
                    border: 0 !important; position: relative; z-index: 2; flex-wrap: nowrap !important; }
body[data-zone] #col-people .tabs .tab {
  --tab: url(../assets/ui/v2/tab_off_ice.png); position: relative; box-sizing: border-box; flex: 1 1 auto !important; height: 26px; padding: 0 !important; margin: 0 0 6px !important;
  white-space: nowrap; cursor: pointer; font: 12px/1 var(--pix) !important; letter-spacing: 0 !important; text-transform: none !important; color: #9fbad2 !important;
  text-shadow: 1px 1px 0 #02060c; background: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important;
  border-style: solid !important; border-width: 6px 6px 0 !important; border-color: transparent !important;
  border-image: var(--tab) 3 fill / 6px 6px 0 6px stretch !important; image-rendering: pixelated;
  display: inline-flex !important; align-items: center; justify-content: center; }
body[data-zone] #col-people .tabs .tab:hover { color: #eef7fd !important; }
body[data-zone] #col-people .tabs .tab.on { --tab: url(../assets/ui/v2/panel_ice.png); height: 32px; margin-bottom: 0 !important; padding-bottom: 4px !important; color: #eef7fd !important; }
body[data-zone] #col-people .tabs .tab.on::before, body[data-zone] #col-people .tabs .tab.on::after { content: ''; position: absolute; bottom: 0; width: 6px; height: 6px;
  background: url(../assets/ui/v2/tabjoin_l_ice.png) 0 0 / 6px 6px; image-rendering: pixelated; }
body[data-zone] #col-people .tabs .tab.on::before { left: -6px; }
body[data-zone] #col-people .tabs .tab.on::after { right: -6px; background-image: url(../assets/ui/v2/tabjoin_r_ice.png); }
body[data-zone="desert"] #col-people .tabs .tab { --tab: url(../assets/ui/v2/tab_off_desert.png); color: #d2b98e !important; }
body[data-zone="desert"] #col-people .tabs .tab.on { --tab: url(../assets/ui/v2/panel_desert.png); color: #fbf3e4 !important; }
body[data-zone="desert"] #col-people .tabs .tab.on::before { background-image: url(../assets/ui/v2/tabjoin_l_desert.png); }
body[data-zone="desert"] #col-people .tabs .tab.on::after { background-image: url(../assets/ui/v2/tabjoin_r_desert.png); }
/* จ๊อบ: ตัดไอคอนกับตัวเลขบนแท็บ (ตัวเลขขึ้นตอนชี้) */
body[data-zone] #col-people .tabs .tab .ico, body[data-zone] #col-people .tabs .tab .twi, body[data-zone] #col-people .tabs .tab span { display: none !important; }
body[data-zone] #col-people .tab-page { position: relative; z-index: 1; box-sizing: border-box; padding: 10px 8px !important;
  border-style: solid; border-width: 6px; border-image: url(../assets/ui/v2/panel_ice.png) 3 fill / 6px stretch; image-rendering: pixelated; box-shadow: 0 4px 0 rgba(0,0,0,.45); }
body[data-zone="desert"] #col-people .tab-page { border-image-source: url(../assets/ui/v2/panel_desert.png); }
body[data-zone] #col-people .tab-page.hidden { display: none !important; }

/* ---------- แถบบน: กรอบพิกเซล · ช่องกว้างเท่ากัน สูง 40 ตัวเลขชิดขวา ---------- */
body #topbar { border-style: solid !important; border-width: 6px !important; border-color: transparent !important; background: none !important; box-shadow: none !important;
               border-image: url(../assets/ui/v2/panel_ice.png) 3 fill / 6px stretch !important; image-rendering: pixelated; }
body[data-zone="desert"] #topbar { border-image-source: url(../assets/ui/v2/panel_desert.png) !important; }
body[data-zone] #resources { gap: 4px !important; align-items: center; }
body #resources .res {
  position: relative; display: flex !important; align-items: center !important; gap: 4px !important; width: 104px; height: 40px; box-sizing: border-box; padding: 0 6px !important;
  background: #08131f !important; border: 2px solid #06101c !important; box-shadow: inset 0 2px 0 #183049, inset 0 -1px 0 #2c5070 !important; border-radius: 0 !important; outline: none !important; }
body[data-zone="desert"] #resources .res { background: #170e06 !important; box-shadow: inset 0 2px 0 #3a2814, inset 0 -1px 0 #6e5030 !important; }
body[data-zone] #resources .res .ico { width: 18px !important; height: 18px !important; flex: none; margin: 0 !important; }
body[data-zone] #resources .res .res-amt { margin-left: auto; display: block; height: 13px; font: 13px/13px var(--pix) !important; color: #eef7fd !important; white-space: nowrap; min-width: 0 !important; font-weight: normal !important; }
body[data-zone] #resources .res.neg .res-amt { color: var(--c-bad, #d9573f) !important; }
body[data-zone] #resources .res .res-rate { display: none !important; }   /* จ๊อบ: อัตรา +/วิ ย้ายไปอยู่ตอนชี้ */
body[data-zone] #resources .res.charm { width: 64px; }
body[data-zone] #resources .grp-sep { width: 2px; height: 28px; background: #06101c; box-shadow: 1px 0 0 #2c5070; margin: 0 6px; flex: none; }
body[data-zone] #res-fly { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
body[data-zone] #res-fly .fly { position: absolute; white-space: nowrap; font: 12px var(--pix); color: #7fc45a; text-shadow: 1px 1px 0 #000; pointer-events: none; animation: ui2-fly 1.2s ease-out forwards; }
@keyframes ui2-fly { from { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-18px); } }

/* ---------- กล่องคำอธิบายตอนชี้ (tooltip.js) กรอบพิกเซล · หัวเรื่องแถบเข้มตัวหนา 13 · เนื้อ 11 ---------- */
body #tip { border: 0 !important; outline: 0 !important; padding: 0 9px 8px !important; max-width: 250px; background: none !important; font: 11px/1.5 var(--pix) !important; color: #cfe0ee !important;
            border-style: solid !important; border-width: 6px !important; border-image: url(../assets/ui/v2/panel_ice.png) 3 fill / 6px stretch !important; image-rendering: pixelated;
            box-shadow: none !important; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.55)); }
body[data-zone="desert"] #tip { border-image-source: url(../assets/ui/v2/panel_desert.png) !important; color: #ecdcc0 !important; }
body #tip .tip-b { padding-top: 7px; color: inherit !important; }
body #tip.has-h .tip-b { padding-top: 6px; }
body #tip .tip-h { margin: 0 -9px !important; padding: 6px 9px 5px; font: 700 13px/1.2 var(--pix) !important; color: #eef7fd !important; letter-spacing: .5px; text-shadow: 1px 1px 0 #02060c;
                   background: #0a1826; border-bottom: 2px solid #06101c; box-shadow: 0 2px 0 #2c5070; }
body[data-zone="desert"] #tip .tip-h { background: #1e1208; border-bottom-color: #1a0f06; box-shadow: 0 2px 0 #6e5030; color: #fbf3e4 !important; }
body[data-zone] .job.keep-toggle { min-width: 96px; }

/* ---------- แถบเลือก (ddHtml) เส้นแบ่งทุกแถว · แถวที่ชี้ทึบสว่าง + ลูกศร ▶ · แถวที่ใช้ไม่ได้จาง ---------- */
body[data-zone] .dd { position: relative; display: inline-block; }
body[data-zone] .dd > .dd-btn { padding-left: 22px !important; padding-right: 22px !important; min-width: 84px; position: relative; }
body[data-zone] .dd > .dd-btn::after { content: '▾'; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 12px; }
body[data-zone] .dd.open > .dd-btn { border-image-source: var(--img-p) !important; padding-top: 2px !important; padding-bottom: 2px !important; }
body[data-zone] .dd .menu { display: none; position: absolute; right: 0; top: calc(100% + 2px); min-width: 270px; z-index: 60; background: #0c1a2a; text-align: left;
  border: 2px solid #06101c; box-shadow: inset 2px 2px 0 #4a7396, inset -2px -2px 0 #112539, 0 4px 0 #06101c; padding: 2px; }
body[data-zone="desert"] .dd .menu { background: #1e1208; box-shadow: inset 2px 2px 0 #8a6a48, inset -2px -2px 0 #36261a, 0 4px 0 #1a0f06; }
body[data-zone] .dd.open .menu { display: block; }
body[data-zone] .dd .menu .row { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 0 10px 0 22px;
  font: 12px/1.25 var(--pix); color: #eef7fd; cursor: pointer; white-space: nowrap; border-top: 1px solid #22405c; }
body[data-zone="desert"] .dd .menu .row { border-top-color: #4a3420; }
body[data-zone] .dd .menu .row:first-child, body[data-zone] .dd .menu .sep + .row { border-top: 0; }
body[data-zone] .dd .menu .row:hover:not(:disabled) { background: #2f5a80; color: #fff; box-shadow: inset 2px 0 0 #9fd8e0; }
body[data-zone="desert"] .dd .menu .row:hover:not(:disabled) { background: #6e5030; box-shadow: inset 2px 0 0 #f0d29a; }
body[data-zone] .dd .menu .row:hover:not(:disabled)::before { content: '▶'; position: absolute; left: 7px; font-size: 9px; color: #9fd8e0; }
body[data-zone] .dd .menu .row .r { margin-left: auto; color: #9fbad2; font-size: 11px; }
body[data-zone] .dd .menu .row .gain { color: #e0b24c; font-weight: normal; }
body[data-zone] .dd .menu .row.danger { color: #ffb4a0; }
body[data-zone] .dd .menu .row:disabled { color: #5d7389; cursor: default; }
body[data-zone] .dd .menu .row:disabled .r, body[data-zone] .dd .menu .row:disabled .gain { color: #5d7389; }
body[data-zone] .dd .menu .row .dot { width: 9px; height: 9px; display: inline-block; border: 1px solid #000; margin-right: 6px; }
body[data-zone] .dd .menu .row .ico { width: 14px; height: 14px; margin-right: 6px; }
body[data-zone] .dd .menu .sep { height: 2px; background: #06101c; margin: 2px 0; }

/* ---------- ร้านค้า / พ่อค้า: หัวการ์ดตัวหนา 14 · แถวสินค้าเรียงในบรรทัดเดียว ---------- */
body[data-zone] .t-h { font: 700 14px/1.2 var(--pix); color: #eef7fd; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; letter-spacing: .5px; }
body[data-zone] .t-h .ico { width: 18px; height: 18px; }
body[data-zone] .card.trader .t-h { color: #e0b24c; }
body[data-zone] .storerow { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px dashed #2c5070; font: 12px var(--pix); color: #eef7fd; }
body[data-zone="desert"] .storerow { border-top-color: #6e5030; }
body[data-zone] .storerow b { font-weight: normal; }
body[data-zone] .storerow .arr { color: #9fbad2; }
body[data-zone] .storerow .muted { font-size: 11px; color: #9fbad2; }
body[data-zone] .storerow .sp { margin-left: auto; display: flex; gap: 6px; align-items: center; }
body[data-zone] .storerow .ico.sm { width: 16px; height: 16px; margin: 0; }
/* การ์ดที่มีแถบเลือก: ห้ามตัดขอบ ไม่งั้นแถบโดนตัด (การ์ดเดิมตัดมุมด้วย clip-path) */
body[data-zone] .card.store, body[data-zone] .card.trader, body[data-zone] .card.store .card-body, body[data-zone] .card.trader .card-body,
body[data-zone] #store { overflow: visible !important; clip-path: none !important; }
/* 2 ต.ค. จ๊อบเจอ: แท็บ Village Store ต้องเลื่อนได้เหมือนแท็บอื่น (เดิมตั้งให้ล้นออกเพื่อไม่ตัดแถบเลือก → รายการพ่อค้าล่างๆ จมใต้แผง Log มองไม่เห็น) */
body[data-zone] #tab-store { overflow-x: hidden; overflow-y: auto; clip-path: none !important; }
body[data-zone] .card.trader .dd .menu { left: 0; right: auto; }   /* ปุ่ม Sell ของพ่อค้าอยู่ชิดซ้าย แถบเปิดไปทางขวา */
/* จ๊อบ: จุดขาว 4 มุมที่กล่องเลขที่เลือกอยู่ = สีพื้นจากกฎเดิมของโซน (.node.on background) โผล่ตรงมุมตัดของภาพปุ่ม → ล้างพื้นทุกสถานะ */
body[data-zone] .node, body[data-zone] .node.on, body[data-zone] .node:hover, body[data-zone] .nodes .node.on, body[data-zone] .nodes.plain .node.done { background: none !important; background-color: transparent !important; }
/* จุด 4 มุมยังโผล่ในเซิฟจริง (2 ต.ค. จ๊อบ เจอที่กล่องเลขเส้นทางตอนออกเดินทาง โซนทะเลทราย): กฎโซนเดิม .nodes.plain .node.on / .job.on ชนะเพราะเจาะจงกว่า
   → ล้างพื้นด้วยตัวเลือกที่เจาะจงเท่ากันทุกแบบ (มาทีหลัง จึงชนะ) · ปุ่มพิกเซลทุกแบบตัดมุมโปร่ง ห้ามมีสีพื้น */
body[data-zone] .nodes.plain .node.on, body[data-zone] .nodes.plain .node.done, body[data-zone] .nodes.plain .node,
body[data-zone] .job.on, body[data-zone] .job.keep-on, body[data-zone] .job.auto.on, body[data-zone] #btn-auto.on, body[data-zone] .site.on,
body[data-zone] .job:hover, body[data-zone] .send:hover, body[data-zone] .job:disabled, body[data-zone] .send:disabled {
  background: none !important; background-color: transparent !important; }

/* การ์ดผู้สร้างแบบย่อในแถบบน ต่อจากโลโก้ (2 ต.ค. จ๊อบ) สูงเท่าช่องทรัพยากร 40 px */
body[data-zone] .creator-mini { display: flex; align-items: center; gap: 6px; height: 40px; box-sizing: border-box; padding: 0 8px 0 3px; flex: none;
  background: var(--in-bg, #08131f); border: 2px solid #06101c; box-shadow: inset 0 2px 0 #183049, inset 0 -1px 0 #2c5070; }
body[data-zone="desert"] .creator-mini { background: #170e06; box-shadow: inset 0 2px 0 #3a2814, inset 0 -1px 0 #6e5030; }
body[data-zone] .creator-mini .creator-pic { width: 32px; height: 32px; border: 0; border-radius: 0; margin: 0; object-fit: cover; box-shadow: 0 0 0 1px #06101c; }
body[data-zone] .creator-mini .cm-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
body[data-zone] .creator-mini .cm-name { font: 11px/11px var(--pix); color: #eef7fd; white-space: nowrap; }
body[data-zone="desert"] .creator-mini .cm-name { color: #fbf3e4; }
body[data-zone] .creator-mini .cm-shop { font: 10px/10px var(--pix); color: #e0b24c; text-decoration: none; white-space: nowrap; }
body[data-zone] .creator-mini .cm-shop:hover { color: #ffd76a; text-decoration: underline; }
/* กดได้ทั้งกล่อง (จ๊อบ): ชี้แล้วยกขึ้น + ขอบสว่าง บอกว่ากดได้ */
body[data-zone] a.creator-mini { text-decoration: none; cursor: pointer; transition: transform .12s; }
body[data-zone] a.creator-mini:hover { transform: translateY(-2px); border-color: #e0b24c; box-shadow: inset 0 2px 0 #183049, 0 0 6px rgba(224,178,76,.45); }
body[data-zone] a.creator-mini:hover .cm-shop { color: #ffd76a; }

/* 2 ต.ค.: ปุ่ม Export / Import ข้าง New Game (จ๊อบเลือกให้อยู่บนหน้าหลัก) */
body[data-zone] .log-foot { gap: 8px; }