/* MOCK-FARM-1 — แมพไร่เพาะปลูก (แมพแยกใหม่ทั้งจอ เข้าจากท้ายจอบ้าน — เคาะ (35))
   ของใหม่ทั้งไฟล์: style.css / deck.css ของเดิมไม่ถูกแตะสักบรรทัด (ด่านปิดข้อ 1)
   กติกา perf 4 ข้อ: ทุกการขยับ = transform/opacity เท่านั้น · ลูปซ้ำ = CSS ·
   ขยับเฉพาะในจอ (.ofv) + หยุดตอนพับแท็บ (body.tab-hidden) · เอฟเฟกต์ผ่านเพดาน+ตัวนับใน farm.js */

/* ---------- ทางเข้าไร่บนจอบ้าน (งานชิ้น 1 — ของจริงบนพื้นท้ายล่างสุดของคอลัมน์) ---------- */
#farm-gate {
  position: absolute; z-index: 3;
  left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 150px;
  border: none; background: none; padding: 0; cursor: pointer;
}
#farm-gate img {
  display: block; width: 100%; height: auto;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 12px #ffd87333);
  animation: bld-glow 5.5s ease-in-out infinite alternate; /* จังหวะเดียวกับสิ่งปลูกสร้างเดิม */
}
/* ป้ายทางเข้า: element แยกชั้นเหนือฝูงสัตว์ (z 6 > animal 5) — ตัวปุ่มจริงยังเป็นของบนพื้น z 3 */
#farm-gate-label {
  position: absolute; z-index: 6;
  left: 50%; bottom: 126px; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: #ffedbf; background: #14142ecc; border: 1.5px solid #ffd87355;
  padding: 5px 12px; border-radius: 999px;
  pointer-events: none;
  animation: hint-float 3s ease-in-out infinite alternate;
}
body.tab-hidden #farm-gate img, body.tab-hidden #farm-gate-label { animation-play-state: paused; }

/* แถบพุ่มไม้ขอบล่างขนาบทางลง (เคาะ 07-17 — หลักเจ้าของ: ของที่เข้ากับคอลัมน์ = แถบแนวนอน
   เต็มกว้างแบบรั้วบน; คัด "พุ่มไม้" จากตัวเทียบ hedge/edge/fence บน live)
   ปลายจบธรรมชาติของภาพหันเข้าช่องกลาง (ท่อนซ้ายโชว์ปลายขวา ท่อนขวาโชว์ปลายซ้าย
   ส่วนเกินวิ่งออกนอกจอแบบรั้วบน) · ช่องกลาง 176px > เนิน 150px ไม่ทับกัน
   · ภาพผ่าน defringe แล้ว (ขอบไร้คราบขาว — บทเรียน 07-17) */
.gate-band {
  position: absolute; z-index: 2; bottom: 0; height: 60px;
  background-image: url("assets/farm/gate-hedge.png");
  background-repeat: no-repeat;
  background-size: auto 100%;
  pointer-events: none;
  filter: brightness(.8) saturate(.85);   /* หรี่เข้าคืนดาว (filter นิ่ง) */
}
.gate-band-l { left: 0;  width: calc(50% - 88px); background-position: right bottom; }
.gate-band-r { right: 0; width: calc(50% - 88px); background-position: left bottom; }

/* ---------- จอไร่ (งานชิ้น 2) — คอลัมน์เดียวเลื่อนดิ่ง โทนคืนดาว ---------- */
#scr-farm { background: var(--void); z-index: 25; }
#farm-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* ห้ามแถบ scroll โผล่ทุกกรณี (ธรรมเนียมจอบ้าน) */
  -ms-overflow-style: none;
}
#farm-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* เลื่อนดิ่งแกนเดียวถาวร — โหมดแพนข้างถูกถอดทั้งระบบ (เจ้าของเคาะ 07-16) */

#farm-world {
  position: relative;
  width: 100%;
  padding-bottom: 108px;   /* กันแถวท้ายจมใต้แถบปุ่มทดลองล่าง */
  /* พื้น = หญ้า tile ตัวเดิมของคอก (เจ้าของสั่ง 07-16: พื้นควรเป็นหญ้า — เอกลักษณ์ไร่อยู่ที่
     แปลงดิน/เตา/โคม/หิ่งห้อย ไม่ใช่สีพื้น) */
  background-image: url("assets/grass-tile.jpg");
  /* ปูแบบเดียวกับ #world จอบ้านเป๊ะ: ยืดเต็มกว้างจอ + วนซ้ำเฉพาะแนวดิ่ง — ห้าม repeat แกนนอน
     (บัคที่เจ้าของจับ 07-16: ล็อก 390px แล้ว repeat สองแกน → จอกว้างกว่า 390 เห็นตะเข็บต่อภาพฝั่งขวา) */
  background-repeat: repeat-y;
  background-size: 100% auto;
  overflow: hidden;
}
/* หมายเหตุถาวร: ไม่มีแปลงคอลัมน์ข้าง/โหมดแพนอีก — บัคจอ 430 เห็นแปลงที่ 4
   (แปลงทดลองของโหมดแพนหลุดขอบผืน) คือเหตุที่เจ้าของเคาะถอดทั้งระบบ 07-16 */

/* ม่านมืดบางๆ หัว-ท้ายคอลัมน์ (ให้ pill บนอ่านออก + ท้ายจางเข้าห้วงคืน) */
#farm-world::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, #0b0b1eaa 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
#farm-world::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 70px;
  background: linear-gradient(0deg, #0b0b1e88 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* ---------- แถบบนจอไร่: สถานะ + ปุ่มกลับบ้านโทนทองขวาบน (ธรรมเนียมเด็ค) ---------- */
#farm-bar {
  position: absolute; z-index: 41;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 0; right: 0; padding: 0 10px 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
#farm-bar > * { pointer-events: auto; }
#farm-status { font-variant-numeric: tabular-nums; }
#farm-home {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(16,14,38,.72); color: #e8dfb8;
  border: 1px solid rgba(220,195,130,.4); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
#farm-home:active { transform: scale(.92); }

/* กระเป๋าไร่ (ผัก/อาหารเดโม) — แถวบนใต้สถานะ ไม่ทับของบนพื้น */
#farm-inv {
  position: absolute; z-index: 41;
  top: calc(env(safe-area-inset-top, 0px) + 60px); left: 14px;
  display: flex; gap: 8px; align-items: center;
  font-size: 12.5px; font-weight: 700; color: #ffedbf;
  background: #14142ecc; border: 1.5px solid #ffd87344;
  padding: 6px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#farm-inv img { width: 20px; height: 20px; object-fit: contain; }
#farm-inv b { color: var(--gold); margin-left: -3px; }

/* คำใบ้แรกเข้า — ใต้แถวกระเป๋า */
#farm-hint {
  position: absolute; z-index: 41;
  top: calc(env(safe-area-inset-top, 0px) + 108px);
  left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: #cfc3ffcc; background: #14142ebb;
  padding: 8px 16px; border-radius: 999px;
  pointer-events: none; transition: opacity .6s;
}
#farm-hint.faded { opacity: 0; }

/* ---------- ท่อนบน: ลานแปรรูป (รอบแก้ 2 จัดใหม่ทั้งโซน — สเกลโลกเดียวกับจอบ้าน ·
   เลขสูงตรงกับ YARD_H ใน farm.js) ---------- */
#farm-yard { position: relative; height: 390px; }
/* ป้าย "ลานแปรรูป" ถูกตัดทิ้ง (เจ้าของชี้ 07-16: ตัวหนังสือลอยบนหญ้าอ่านเป็นบัค) */

/* ลานหิน/ทางเดิน/โคมเสา ถูกถอดถาวร (เคาะ 07-17): สิ่งปลูกสร้างยืนบนหญ้าเปล่าแบบจอบ้าน —
   ความสวยอนาคต = ของประดับเกาะตัวอาคารตามขั้นอัปเกรด ไม่กินพื้นที่พื้น (ไฟล์เจนเก็บที่ assets/gen) */

#furnace {
  /* left ตั้งจาก JS (farmLayout) · width ตั้งจาก applyFurnaceForm (naturalWidth/3 —
     ไฟล์ normalize สเกลโลกแล้ว ห้ามใส่ width ตายตัวรายร่างอีก) */
  position: absolute; z-index: 3;
  top: 282px; transform: translate(-50%, -100%);
  width: 126px;
  border: none; background: none; padding: 0; cursor: pointer;
}
#furnace img {
  display: block; width: 100%; height: auto;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 14px #ffb96644);
  animation: bld-glow 4.5s ease-in-out infinite alternate;
}
#furnace::after { /* เงาใต้ตัวแบบเดียวกับ .bld เดิม */
  content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 72%; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, #00000052, transparent);
  z-index: -1;
}
#furnace .f-name {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: #ffd8a8; background: #14142ecc; border: 1px solid #ffb36c55;
  padding: 4px 12px; border-radius: 999px;
}
#furnace .gauge { top: 47%; width: 96px; display: none; } /* กลางตัวเตา — เหนือปล่องโดนแถบ/ขอบจอบังง่าย */
#furnace.cooking .gauge { display: flex; }
#furnace.cooking img { animation: furnace-cook 1.1s ease-in-out infinite; }
@keyframes furnace-cook {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.015, .985); }
}
/* ควันไฟตอนกำลังปรุง (โค้ดล้วน transform/opacity — ไม่มีตอนว่าง) */
#furnace .f-smoke {
  /* left = ตำแหน่งปล่องต่อร่าง (--smoke-x ตั้งจาก applyFurnaceForm — วัดจริงจากไฟล์ normalize) */
  position: absolute; top: 6px; left: var(--smoke-x, 50%); width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff3d6cc, #fff3d600 70%);
  opacity: 0; pointer-events: none;
}
#furnace.cooking .f-smoke { animation: f-smoke 2.2s ease-out infinite; }
#furnace.cooking .f-smoke.s2 { animation-delay: 1.1s; }
@keyframes f-smoke {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  25%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.6); }
}

/* หมุดพื้นว่างจองอาคารอนาคต (ห้ามสร้างตัวจริง) — ป้ายอยู่ใต้หมุด ไม่ทับลายหิน
   FARM-2 งานชิ้น 4: หด+จางลงเป็นของเงียบสมบทบาท "ที่ว่าง" (เดิมขาวสว่างแย่งตาแปลงจริง) */
.pad {
  position: absolute; z-index: 2;
  transform: translate(-50%, -100%);
  width: 86px; pointer-events: none;
}
.pad img {
  display: block; width: 100%; height: auto; -webkit-user-drag: none;
  opacity: .62; filter: brightness(.8) saturate(.85);
}
.pad span {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  font-size: 9.5px; font-weight: 600; white-space: nowrap;
  color: #a9a9c8aa; background: #14142e88; border: 1px dashed #a9a9c833;
  padding: 2px 8px; border-radius: 999px;
}
/* left ของหมุดตั้งจาก JS (farmLayout) — สองข้างทางเดิน บนหญ้า เว้นที่ให้ตัวจริงมาสร้างได้จริง */
#pad-potion { top: 386px; }
#pad-rune   { top: 386px; }

/* หิ่งห้อย (เอกลักษณ์ไร่ — CSS ล้วน transform/opacity, เพดานจำนวนคุมใน farm.js) */
.firefly {
  position: absolute; z-index: 6; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff8d0, #d8ff9c66 60%, transparent 75%);
  box-shadow: 0 0 7px 2px #d8ff9c55;
  pointer-events: none;
  animation: ff-drift var(--ff-dur, 9s) ease-in-out var(--ff-delay, 0s) infinite alternate,
             ff-blink 2.7s ease-in-out var(--ff-delay, 0s) infinite alternate;
}
@keyframes ff-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--ff-dx, 40px), var(--ff-dy, -30px)); }
}
@keyframes ff-blink { 0%, 100% { opacity: .1; } 40% { opacity: .95; } 60% { opacity: .5; } }

/* เกตหยุดนอกจอ + พับแท็บ (กติกา perf ข้อ 3) — .ofv ติดโดย IntersectionObserver ใน farm.js */
#scr-farm .ofv, #scr-farm .ofv * { animation-play-state: paused !important; }
body.tab-hidden #scr-farm * { animation-play-state: paused !important; }

/* ---------- ท่อนล่าง: แถวแปลงปลูก (งานชิ้น 3-4)
   FARM-2: แถวชิดกันเป็นผืนนาจริง (.plot-row height ตรงกับ ROW_H ใน farm.js) ·
   ป้าย "แถว 1/แถว 2" ถูกตัดทิ้ง · แปลงกว้างขึ้นจนเกือบชนกัน (ช่องคอลัมน์ 129px) ---------- */
#farm-rows { position: relative; }
.plot-row { position: relative; height: 124px; }
.plot {
  position: absolute; z-index: 3;
  transform: translate(-50%, -100%);
  width: 126px;
  border: none; background: none; padding: 0; cursor: pointer;
  min-height: 60px;
}
.plot > img {
  display: block; width: 100%; height: auto;
  -webkit-user-drag: none;
}
/* เงาใต้แปลงถูกตัดทิ้ง (เจ้าของชี้ 07-16: แปลงเป็นของแบนราบติดดิน ไม่ควรมีเงาลอย —
   เงาคงไว้เฉพาะสิ่งปลูกสร้างทรงสูง เช่น เตา) */
/* สถานะอ่านแวบเดียว: ว่าง=ดินเปล่า / โต=ต้นอ่อน+หลอดเวลา / พร้อมเก็บ=เรือง (opacity pulse ล้วน) */
.plot .p-glow {
  position: absolute; inset: -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #ffe9a844, transparent 72%);
  opacity: 0; pointer-events: none;
}
.plot.ready .p-glow { animation: plot-ready-glow 1.9s ease-in-out infinite alternate; }
@keyframes plot-ready-glow { from { opacity: .35; } to { opacity: 1; } }
.plot.ready > img { animation: plot-ready-bob 2.4s ease-in-out infinite alternate; }
@keyframes plot-ready-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.plot .gauge { top: -26px; width: 84px; }
.plot.growing .gauge { display: flex; }
.plot.hit > img { animation: shard-hit .35s ease; }

/* ชิปปลูกซ้ำไว (โผล่ครู่เดียวหลังเก็บ — จบวงจรไม่กี่แตะ) */
.replant-chip {
  position: absolute; z-index: 7; transform: translate(-50%, -50%);
  min-height: 40px; padding: 7px 14px;
  border-radius: 999px; border: 1.5px solid #d9a13d;
  background: linear-gradient(180deg, #ffe083, #ffc93d);
  color: #6b4300; font-family: inherit; font-size: 12.5px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 0 #c68a1e, 0 6px 14px #00000066;
  animation: chip-in .25s ease;
}
@keyframes chip-in { from { opacity: 0; transform: translate(-50%, -30%); } }

/* ---------- แถบปุ่มทดลองล่างตรึงกับจอ (งานชิ้น 5/6 — เจ้าของจิ้มเทียบหน้างาน)
   แถวเดียวสามปุ่มเท่ากัน ไม่ทับของบนพื้น (world มี padding-bottom เผื่อแล้ว) ---------- */
#farm-tray {
  position: absolute; z-index: 41;
  left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px;
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(0deg, #0b0b1ef2 55%, transparent 100%);
}
.farm-chip {
  flex: 1; min-height: 46px; padding: 7px 6px;
  border-radius: 14px; border: 1.5px solid #cfc3ff55;
  background: #1c1c3dee; color: #cfc3ff;
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; text-align: center;
}
.farm-chip:active { background: var(--night-hi); }
.farm-chip.on { border-color: #ffd87399; color: var(--gold); }
.farm-chip small { display: block; font-size: 10px; font-weight: 600; color: #8f8fb8; }
.farm-chip.on small { color: #c9a95e; }

/* ---------- เมนูปลูก: กริดเดียวกับ picker เดิม (บทเรียนรอบแรก: id ใหม่ไม่ได้กฎ grid มาด้วย) ---------- */
#farm-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow-y: auto; }

/* ---------- แผงเตา (sheet — ภาษาเดียวกับ sheet เดิม; โครงคลาสใช้ของ style.css) ---------- */
.fs-row {
  display: flex; align-items: center; gap: 9px;
  border: 2px solid #e4cf9e; border-radius: 12px; background: #fff;
  padding: 7px 10px; margin-bottom: 7px; font-size: 13px; font-weight: 700;
}
.fs-row img { width: 34px; height: 34px; object-fit: contain; }
.fs-row .who { flex: 1; }
.fs-row .who small { display: block; font-weight: 600; color: #a4670f; font-size: 11px; }
.fs-cook {
  min-height: 44px; padding: 6px 14px; border-radius: 999px;
  border: 2px solid #d9b96a; background: linear-gradient(180deg, #fffaf0, #ffe9c4);
  font-family: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.fs-cook:active { background: #ffe9c4; }
.fs-cook[disabled] { opacity: .45; }
.fs-note {
  text-align: center; font-size: 12px; font-weight: 600; color: #8a6d3b;
  background: #fff3d6; border-radius: 10px; padding: 9px 10px; margin-top: 4px;
}
.fs-status { font-size: 12.5px; color: #8a6d3b; margin: 2px 0 10px; text-align: center; }

/* ---------- จอวัดสดฝั่งไร่ (งานชิ้น 7 — โผล่เฉพาะ ?debug=1 บนจอไร่) ---------- */
#farm-meter {
  position: absolute; z-index: 90;
  left: 10px; top: calc(env(safe-area-inset-top, 0px) + 104px);
  background: #0b0b1ecc; border: 1px solid #9fd8ff44; border-radius: 10px;
  padding: 7px 10px; font-size: 10.5px; line-height: 1.6; color: #cfe3ff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  pointer-events: none; white-space: pre;
}
#farm-meter.hidden { display: none; }