/* =============================================================================
   FARM INDEX — v2: struktur baru, bukan tema baru
   =============================================================================

   Percobaan pertama (redesign.css) cuma mengganti warna dan sudut di atas
   rangka yang sama, jadi hasilnya masih terbaca sebagai halaman yang itu-itu
   juga. Kali ini rangkanya yang diganti — markup halaman depan ditulis ulang
   di app-v2.js dengan nama kelas baru berawalan fx-, sehingga styles.css
   tidak menyentuhnya sama sekali. Berkas ini bukan lapisan penimpa; ini
   lembar gaya penuh untuk susunan yang baru.

   Yang berubah susunannya:
     - kepala kembar (teks kiri + panel ladang kanan)  ->  pernyataan satu
       blok tanpa gambar sama sekali di sebelahnya
     - tanaman sebagai satu gambar besar di kotak      ->  DERET selebar layar
     - empat kartu kampanye                            ->  TABEL berkolom
     - pita empat angka di bawah kepala                ->  blok angka sendiri
       jauh di bawah, setelah tabel
     - enam kotak "how to play"                        ->  daftar bernomor
       menurun dengan garis pemisah
     - tombol di dalam kepala                          ->  DERMAGA menempel di
       dasar layar, selalu terlihat
     - (baru) pita berjalan berisi harga kampanye di paling atas

   Isi tulisan, data, dan seluruh logika permainan tidak diubah.
   ========================================================================== */

@import url('v2-fonts.css');

:root {
  --ink: #0E0F0C;
  --ink-2: #22241E;
  --paper: #F5F3EC;
  --paper-2: #E8E5D8;
  --acid: #C7F03C;
  --field: #0F3B25;
  --tomato: #FF4D1F;
  --muted: #0e0f0c8f;
  --muted-light: #f5f3ec8c;
  --rule: 1px solid #0e0f0c1f;
  --rule-strong: 2px solid var(--ink);

  /* variabel styles.css dipetakan ulang supaya tampilan PERMAINAN
     (yang masih memakai kelas lama) tidak bentrok dengan halaman depan */
  --brown: #0F3B25;
  --dark-brown: #0E0F0C;
  --green: #0F3B25;
  --grass: #C7F03C;
  --gold: #C7F03C;
  --red: #FF4D1F;
  --blue: #0F3B25;
  --teal: #0F3B25;
  --shadow: none;

  font-family: 'Karla', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

html, body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { padding-bottom: 88px; }            /* ruang untuk dermaga */

/* sudut siku & tanpa bayangan; sprite piksel dikecualikan karena warnanya
   ditulis inline per <i> dan bentuknya memang kotak */
#app *:not(.pixel-sprite):not(.pixel-sprite i), .fx-foot *, .fx-dock * {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.app-shell { width: 100%; max-width: none; margin: 0; padding: 0; }

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; margin: 0; }
p { line-height: 1.58; margin: 0; }
a { color: inherit; }

/* label kecil di seluruh halaman */
.fx-tag, .fx-kicker, .fx-bar-meta, .fx-bar-nav, .fx-c-code, .fx-table th,
.fx-figure span, .fx-foot-ca, .fx-btn, .fx-plant figcaption small {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
}
.fx-dot { width: 6px; height: 6px; background: var(--acid); display: inline-block; }

/* -----------------------------------------------------------------------------
   BILAH ATAS — tipis, menempel, tanpa tombol. Tombolnya pindah ke dermaga.
   -------------------------------------------------------------------------- */
.fx-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 22px;
  background: var(--ink); color: var(--paper);
  padding: 0 20px; height: 56px;
}
.fx-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.fx-mark i { width: 13px; height: 13px; background: var(--acid); display: block; }
.fx-mark span { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.fx-mark b { color: var(--acid); font-weight: 800; }
.fx-bar-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted-light); }
.fx-bar-nav { display: flex; gap: 20px; }
.fx-bar-nav a { text-decoration: none; color: var(--paper); padding: 4px 0; border-bottom: 1px solid transparent; }
.fx-bar-nav a:hover { border-bottom-color: var(--acid); color: var(--acid); }

/* -----------------------------------------------------------------------------
   PITA BERJALAN — elemen yang sebelumnya tidak ada sama sekali
   -------------------------------------------------------------------------- */
.fx-ticker { background: var(--acid); color: var(--ink); overflow: hidden; border-bottom: var(--rule-strong); }
.fx-ticker-run { display: flex; width: max-content; animation: fx-run 46s linear infinite; }
.fx-ticker-run span { padding: 9px 26px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; white-space: nowrap; border-right: 1px solid #0e0f0c26; }
.fx-ticker-run b { font-weight: 700; }
@keyframes fx-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fx-ticker-run { animation: none; } }

/* -----------------------------------------------------------------------------
   PERNYATAAN — pengganti "hero". Tidak ada gambar di sebelahnya; kolom kanan
   isinya teks kecil, jadi mata jatuh ke judul dulu, baru turun ke ladang.
   -------------------------------------------------------------------------- */
.fx-statement {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding: clamp(46px, 7vw, 104px) clamp(20px, 4vw, 60px) clamp(38px, 5vw, 72px);
  border-bottom: var(--rule-strong);
}
.fx-kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: clamp(20px, 3vw, 40px); }
.fx-statement h1 { font-size: clamp(40px, 7.6vw, 108px); letter-spacing: -0.045em; }
.fx-statement-side { display: grid; gap: 14px; padding-bottom: 8px; }
.fx-statement-side p { font-size: 14px; max-width: 46ch; }
.fx-muted { color: var(--muted); font-size: 12.5px !important; border-top: var(--rule); padding-top: 14px; }

/* -----------------------------------------------------------------------------
   DERET TANAMAN — selebar layar, satu baris, bisa digeser di layar sempit.
   Sprite-nya sengaja dibikin siluet tinta dulu; warnanya baru muncul saat
   disentuh, supaya deretnya terbaca sebagai barisan ladang, bukan galeri.
   -------------------------------------------------------------------------- */
.fx-field { background: var(--field); border-bottom: var(--rule-strong); }

/* deret bibit di halaman depan: 4 bibit x 4 tahap */
.fx-field-head { padding: clamp(26px, 3.4vw, 44px) clamp(20px, 4vw, 60px) 0; display: grid; gap: 10px; }
.fx-field-head .fx-tag { color: var(--acid); }
.fx-field-head p { color: var(--muted-light); font-size: 13.5px; max-width: 68ch; }
.fx-field-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(18px, 2.6vw, 32px) clamp(20px, 4vw, 60px) clamp(26px, 3.4vw, 44px);
  gap: 0;
}
.fx-plant { margin: 0; padding: 0 clamp(10px, 1.6vw, 22px); border-right: 1px solid #f5f3ec1f; display: grid; gap: 14px; align-content: start; }
.fx-plant:first-child { padding-left: 0; }
.fx-plant:last-child { border-right: 0; padding-right: 0; }
.fx-plant-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fx-plant-stage { display: grid; justify-items: center; gap: 7px; padding: 10px 2px; background: #f5f3ec0a; }
.fx-plant-stage small { color: var(--muted-light); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; }
.fx-plant-stage:last-child { background: #c7f03c1f; }
.fx-plant-stage:last-child small { color: var(--acid); }
.fx-plant figcaption { display: grid; gap: 3px; color: var(--paper); }
.fx-plant figcaption b { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.fx-plant figcaption span { color: var(--acid); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.fx-plant figcaption small { color: var(--muted-light); font-size: 11.5px; margin-top: 4px; }

/* -----------------------------------------------------------------------------
   KEPALA BAGIAN
   -------------------------------------------------------------------------- */
.fx-sec-head { display: grid; gap: 12px; max-width: 74ch; margin-bottom: clamp(24px, 3vw, 40px); }
.fx-tag { color: var(--tomato); }
.fx-sec-head h2 { font-size: clamp(30px, 4.6vw, 62px); }
.fx-sec-head p { color: var(--muted); font-size: 14px; max-width: 62ch; }

/* -----------------------------------------------------------------------------
   TABEL KAMPANYE — pengganti empat kartu
   -------------------------------------------------------------------------- */
.fx-ledger { padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 60px); border-bottom: var(--rule-strong); }
.fx-table-wrap { overflow-x: auto; border-top: var(--rule-strong); }
.fx-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.fx-table th {
  text-align: left; color: var(--muted); font-weight: 700;
  padding: 12px 14px; border-bottom: var(--rule);
}
.fx-table td { padding: 18px 14px; border-bottom: var(--rule); font-size: 14px; vertical-align: middle; }
.fx-row { cursor: pointer; transition: background .12s linear; }
.fx-row:hover, .fx-row:focus-visible { background: var(--acid); outline: 0; }
.fx-c-code { font-size: 10px; color: var(--muted); white-space: nowrap; }
.fx-row:hover .fx-c-code { color: var(--ink); }
.fx-c-crop { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.fx-c-crop b { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.fx-seed { display: grid; place-items: center; width: 30px; height: 30px; background: var(--field); }
.fx-c-place, .fx-c-stage, .fx-c-risk { color: var(--muted); white-space: nowrap; }
.fx-row:hover .fx-c-place, .fx-row:hover .fx-c-stage, .fx-row:hover .fx-c-risk { color: var(--ink-2); }
.fx-c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-c-ticket { font-weight: 700; }
.fx-c-fill { min-width: 132px; }
.fx-meter { display: block; height: 4px; background: #0e0f0c1a; margin-bottom: 6px; }
.fx-meter i { display: block; height: 100%; background: var(--ink); }
.fx-c-fill em { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-c-go { text-align: right; font-size: 19px; color: #0e0f0c40; width: 44px; }
.fx-row:hover .fx-c-go { color: var(--ink); }
.fx-fine { margin-top: 16px; font-size: 11.5px; color: var(--muted); max-width: 82ch; }

/* -----------------------------------------------------------------------------
   ANGKA — dipisah dari kepala halaman, berdiri sebagai bagian sendiri
   -------------------------------------------------------------------------- */
.fx-figures { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: var(--paper); border-bottom: var(--rule-strong); }
.fx-figure { padding: clamp(26px, 3.4vw, 46px) clamp(16px, 2vw, 30px); border-right: 1px solid #f5f3ec1f; display: grid; gap: 10px; align-content: start; }
.fx-figure:last-child { border-right: 0; }
.fx-figure strong { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: clamp(38px, 4.6vw, 66px); color: var(--acid); letter-spacing: -0.04em; line-height: 0.9; }
.fx-figure span { color: var(--paper); }
.fx-figure p { color: var(--muted-light); font-size: 12.5px; }

/* -----------------------------------------------------------------------------
   PROTOKOL — daftar menurun bernomor, bukan kisi enam kotak
   -------------------------------------------------------------------------- */
.fx-protocol { padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 60px); }
.fx-steps { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong); }
.fx-step {
  display: grid; grid-template-columns: 108px 1fr; gap: clamp(16px, 3vw, 48px);
  padding: 24px 0; border-bottom: var(--rule);
  transition: padding-left .14s ease;
}
.fx-step:hover { padding-left: 12px; }
.fx-step-n { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 40px; color: #0e0f0c26; letter-spacing: -0.04em; line-height: 1; }
.fx-step:hover .fx-step-n { color: var(--tomato); }
.fx-step-body { display: grid; gap: 7px; }
.fx-step h3 { font-size: 21px; }
.fx-step p { color: var(--muted); font-size: 14px; max-width: 78ch; }
.fx-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 30px 0 0; }
.fx-notes > div { padding: 0 22px; border-left: 2px solid var(--acid); }
.fx-notes dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; margin-bottom: 7px; }
.fx-notes dd { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* -----------------------------------------------------------------------------
   KAKI
   -------------------------------------------------------------------------- */
.fx-foot { background: var(--ink); color: var(--muted-light); padding: clamp(34px, 5vw, 62px) clamp(20px, 4vw, 60px) clamp(28px, 3vw, 40px); }
.fx-foot .fx-mark span { color: var(--paper); }
.fx-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid #f5f3ec1f; }
.fx-foot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.fx-foot-nav a { color: var(--paper); text-decoration: none; font-size: 13px; border-bottom: 1px solid #f5f3ec33; padding-bottom: 2px; }
.fx-foot-nav a:hover { color: var(--acid); border-color: var(--acid); }
.fx-foot-ca { padding: 24px 0; font-size: 10px; letter-spacing: 0.16em; line-height: 2; }
.fx-foot-ca a { color: var(--acid); font-size: 12px; letter-spacing: 0.04em; text-decoration: none; border-bottom: 1px solid #c7f03c4d; }
.fx-foot-ca em { display: block; font-style: normal; letter-spacing: 0.04em; font-size: 11.5px; color: #f5f3ec66; margin-top: 8px; }
.fx-foot-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid #f5f3ec1f; padding-top: 18px; }
.fx-foot-base small { font-size: 11px; color: #f5f3ec66; max-width: 62ch; }

/* -----------------------------------------------------------------------------
   DERMAGA — ajakan yang selalu menempel di dasar layar
   -------------------------------------------------------------------------- */
.fx-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--paper); border-top: var(--rule-strong);
  padding: 12px clamp(14px, 3vw, 28px);
}
.fx-dock-copy { display: grid; gap: 2px; }
.fx-dock-copy strong { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.fx-dock-copy span { font-size: 12px; color: var(--muted); }
.fx-dock-actions { display: flex; gap: 8px; }
.fx-btn {
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  padding: 13px 20px; cursor: pointer; font-family: 'Karla', system-ui, sans-serif;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .12s linear, color .12s linear;
}
.fx-btn:hover { background: var(--ink); color: var(--paper); }
.fx-btn-solid { background: var(--acid); border-color: var(--acid); }
.fx-btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--acid); }
.fx-btn em { font-style: normal; background: var(--tomato); color: #fff; padding: 3px 6px; font-size: 9px; letter-spacing: 0.14em; }

/* -----------------------------------------------------------------------------
   TAMPILAN PERMAINAN
   Layar permainan masih memakai kelas lama dari styles.css. Di sini cukup
   disamakan bahasanya — siku, garis tinta, huruf yang sama — supaya pindah
   dari halaman depan ke permainan tidak terasa loncat ke situs lain.
   -------------------------------------------------------------------------- */
.topbar { background: var(--ink); color: var(--paper); border-bottom: var(--rule-strong); }
.brand-wordmark span:last-child, .badge.demo { color: var(--acid); }
.badge, .level-box, .wallet-pill { border: 1px solid #ffffff2e; background: transparent; color: var(--paper); }
.track { border: 0; background: #ffffff26; }
.track > span { background: var(--acid); }
.pixel-panel { border: var(--rule-strong); background: var(--paper); }
.pixel-btn, .tab-btn, .card-btn {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 16px;
}
.pixel-btn:hover, .tab-btn:hover, .card-btn:hover { filter: none; background: var(--ink); color: var(--paper); }
.pixel-btn:active, .tab-btn:active, .plot:active, .card-btn:active { transform: none; }
.pixel-btn.primary, .pixel-btn.success { background: var(--acid); border-color: var(--acid); }
.pixel-btn.danger { background: var(--tomato); border-color: var(--tomato); color: #fff; }
.pixel-btn.tiny { padding: 6px 9px; font-size: 9px; }
.tab-btn.active { background: var(--ink); color: var(--paper); }
.plot:hover { background: var(--acid); transform: none; }
.metric strong, .stat-card strong, .dashboard-primary-stat strong { font-family: 'Fraunces', Georgia, serif; font-weight: 800; }
.dashboard-modal-backdrop, .wl-backdrop { background: #0e0f0cd9; }
.wl-modal, .dashboard-modal { border: var(--rule-strong); background: var(--paper); }
.wl-head { background: var(--ink); color: var(--paper); }
.wl-eyebrow { color: var(--acid); }
.wl-primary { background: var(--acid); border: 2px solid var(--acid); color: var(--ink); }
.wl-btn, .wl-ghost { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.panel-corner-logo, .brand-corner { display: none; }

/* =============================================================================
   PEKARANGAN: RUMAH, SUMUR, PAGAR, DAN PETANI YANG BERJALAN
   =============================================================================
   Satu hal penting soal animasi di sini: render() menulis ulang seluruh DOM
   tiap satu detik, jadi animasi CSS apa pun akan mengulang dari nol tiap
   render dan kelihatan tersendat. Obatnya bukan mematikan render, tapi
   animation-delay negatif yang dihitung dari jam dinding (lihat phase() di
   app-v2.js): elemen yang baru lahir langsung dilompatkan ke fase yang benar,
   jadi langkah petani terlihat menyambung walau elemennya sebetulnya baru.
   ========================================================================== */
.fx-farm { border: var(--rule-strong); background: #BFE3F2; }
.fx-yard { display: grid; grid-template-rows: auto auto; }

/* halaman atas: langit, rumah, pohon, sumur, pagar, petani */
.fx-yard-scene {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: linear-gradient(#BFE3F2 0 58%, #7FB93F 58%, #6BA334 100%);
  border-bottom: 3px solid #4A2F19;
}
.fx-house { position: absolute; left: 3%; bottom: 26%; }
.fx-tree { position: absolute; right: 6%; bottom: 28%; }
.fx-well { position: absolute; right: 24%; bottom: 24%; }
.fx-well-gauge { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 26px; height: 22px; background: #2A5080; display: block; }
.fx-well-gauge i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--b, #8CC4EA); background: #8CC4EA; display: block; }
.fx-well-label { position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px; background: var(--ink); color: var(--acid); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; padding: 2px 5px; }

/* asap cerobong: tiga bulatan naik bergantian */
.fx-smoke { position: absolute; left: 20px; top: -6px; width: 7px; height: 7px; background: #f5f3ecb3; animation: fx-smoke 4.2s linear infinite; }
.fx-smoke-2 { animation-duration: 4.2s; animation-delay: -1.4s !important; }
.fx-smoke-3 { animation-duration: 4.2s; animation-delay: -2.8s !important; }
@keyframes fx-smoke {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translate(-16px, -46px) scale(1.5); opacity: 0; }
}

.fx-fence { position: absolute; left: 0; right: 0; bottom: 34%; display: flex; opacity: 0.9; pointer-events: none; }

/* petani: satu animasi memindahkan, satu membalik badan, satu menukar kaki.
   Jalannya di jalur rumput persis di atas bedengan. */
.fx-farmer { position: absolute; bottom: 2%; left: 0; z-index: 3; animation: fx-walk 16s linear infinite; }
.fx-farmer-flip { position: relative; animation: fx-face 16s steps(1) infinite; }
.fx-frame { position: absolute; left: 0; top: 0; }
.fx-frame-a { animation: fx-legs-a .64s steps(1) infinite; }
.fx-frame-b { animation: fx-legs-b .64s steps(1) infinite; }
@keyframes fx-walk { 0% { left: 6%; } 50% { left: 78%; } 100% { left: 6%; } }
@keyframes fx-face { 0%, 49.9% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
@keyframes fx-legs-a { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fx-legs-b { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fx-farmer, .fx-farmer-flip, .fx-frame-a, .fx-frame-b, .fx-smoke { animation: none; }
  .fx-frame-b { opacity: 0; }
}

/* -----------------------------------------------------------------------------
   BEDENGAN
   Petaknya bukan kotak terpisah lagi — dia lantai tanah di dalam pekarangan
   yang sama. Warna dasarnya sengaja disamakan dengan dua baris tanah di kaki
   tiap sprite, jadi tanamannya kelihatan tumbuh DARI bedengan, bukan
   ditempelkan di atas kartu.
   -------------------------------------------------------------------------- */
.fx-garden { background: #6B4526; padding: 0 0 10px; }
.fx-garden-label {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 12px; color: #F5F3ECb3;
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid #f5f3ec1f;
}
.fx-beds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.fx-beds .plot {
  position: relative; display: grid; justify-items: center; align-content: end; gap: 4px;
  padding: 10px 6px 8px; min-height: 118px;
  border: 0; border-right: 1px solid #4A2F19; border-bottom: 1px solid #4A2F19;
  background: #9A6A42;
  background-image: repeating-linear-gradient(90deg, #00000012 0 2px, transparent 2px 7px);
  cursor: pointer;
}
.fx-beds .plot:nth-child(6n) { border-right: 0; }
.fx-beds .plot:nth-last-child(-n+6) { border-bottom: 0; }
.fx-beds .plot:hover { background-color: #AE7A4E; }
.fx-beds .plot.ready { background-color: #B9E04A; }
.fx-beds .plot.thirsty { background-color: #C9924E; }
.fx-beds .plot.locked { background-color: #4A2F19; background-image: none; }
.plot-stage-art { display: block; }
.plot-stage-name { font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: #f5f3ecb3; }
.plot.ready .plot-stage-name { color: var(--ink); }
.plot-lock, .plot-cost { color: #f5f3ec8c; font-size: 9px; letter-spacing: 0.12em; }
.plot-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; background: var(--ink); color: var(--acid); padding: 2px 6px; }
.plot.ready .plot-tag { background: var(--ink); color: var(--acid); }
.plot.thirsty .plot-tag { background: var(--tomato); color: #fff; }
.plot-timer { font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 700; color: #f5f3ec; }
.plot.ready .plot-timer, .plot.thirsty .plot-timer { color: var(--ink); }
.plot.thirsty .plot-timer { color: #7A1E08; }
.growth { display: block; width: 100%; height: 3px; background: #0000002e; }
.growth > span { display: block; height: 100%; background: var(--ink); }
.growth.stalled > span { background: var(--tomato); }
.plot-badge { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; }
.plot-badge.ontime { left: auto; right: 4px; background: var(--ink); color: var(--acid); font-size: 8px; font-weight: 700; padding: 2px 4px; }
.plot-fert-btn { position: absolute; bottom: 4px; right: 4px; display: grid; place-items: center; padding: 3px; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; }
.plot-fert-btn:hover { background: var(--acid); }
.wilt { animation: fx-wilt 2.4s ease-in-out infinite; transform-origin: bottom center; }
@keyframes fx-wilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* =============================================================================
   MUTASI & TAS
   =============================================================================
   Warna mutasi tidak digambar ulang per sprite — sprite-nya sama, yang diganti
   cuma filter warnanya. Satu kelas .mut-* menyulap gambar mana pun jadi versi
   langkanya, jadi menambah tanaman baru tidak menambah pekerjaan menggambar.
   ========================================================================== */
.mut-lush { filter: saturate(1.7) brightness(1.06) drop-shadow(0 0 3px #5E9B3266); }
.mut-golden { filter: sepia(0.75) saturate(3.2) hue-rotate(-12deg) brightness(1.12) drop-shadow(0 0 4px #EFC35199); }
.mut-prism { filter: saturate(2.2) hue-rotate(0deg) drop-shadow(0 0 4px #8B5FBFaa); animation: fx-prism 3.6s linear infinite; }
@keyframes fx-prism { 0% { filter: saturate(2.2) hue-rotate(0deg) drop-shadow(0 0 4px #8B5FBFaa); } 100% { filter: saturate(2.2) hue-rotate(360deg) drop-shadow(0 0 4px #8B5FBFaa); } }
@media (prefers-reduced-motion: reduce) { .mut-prism { animation: none; } }

[data-rarity="common"] { --rare: #9A9689; }
[data-rarity="lush"]   { --rare: #5E9B32; }
[data-rarity="golden"] { --rare: #C9922B; }
[data-rarity="prism"]  { --rare: #8B5FBF; }
[data-rarity="seed"]   { --rare: var(--ink); }

/* lencana mutasi di bedengan */
.plot-mutation {
  position: absolute; top: 4px; left: 4px;
  background: var(--rare, var(--ink)); color: #fff;
  font-size: 7px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 4px;
}

.bag-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: var(--rule-strong); padding: 10px 12px; margin-bottom: 10px; }
.bag-summary > div { display: grid; gap: 2px; padding-right: 14px; border-right: var(--rule); }
.bag-summary > div:last-of-type { border-right: 0; }
.bag-summary span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.bag-summary strong { font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 17px; }
.bag-summary .pixel-btn { margin-left: auto; }

.bag-section-head { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.bag-cell {
  position: relative; display: grid; justify-items: center; gap: 6px;
  padding: 10px 4px 7px; cursor: pointer;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif;
}
.bag-cell[data-rarity] { border-color: var(--rare); }
.bag-cell:hover { background: var(--paper-2); }
.bag-cell.selected { background: var(--acid); }
.bag-cell.locked { opacity: 0.45; }
.bag-cell small { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.bag-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--ink); color: var(--acid);
  font-size: 9px; font-weight: 700; padding: 1px 4px; font-variant-numeric: tabular-nums;
}
.bag-star { position: absolute; top: 2px; left: 2px; background: var(--rare); color: #fff; font-size: 9px; font-weight: 700; width: 15px; height: 15px; display: grid; place-items: center; }

.bag-detail { display: grid; grid-template-columns: auto 1fr; gap: 14px; border: var(--rule-strong); padding: 12px; background: var(--paper); }
.bag-detail[data-rarity] { border-left: 6px solid var(--rare); }
.bag-detail.empty { grid-template-columns: 1fr; border-style: dashed; border-width: 2px; }
.bag-detail.empty p { color: var(--muted); font-size: 12.5px; }
.bag-detail-art { display: grid; place-items: center; padding: 8px; background: var(--paper-2); align-self: start; }
.bag-detail-copy { display: grid; gap: 8px; align-content: start; }
.bag-detail-copy h3 { font-size: 20px; }
.bag-detail-copy h3 em { font-style: normal; font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 400; color: var(--muted); }
.bag-detail-copy p { font-size: 12.5px; color: var(--muted); }
.bag-rarity { justify-self: start; background: var(--rare, var(--ink)); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 3px 7px; }
.bag-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; margin: 0; }
.bag-facts > div { border-top: var(--rule); padding-top: 5px; }
.bag-facts dt { font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.bag-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.bag-stage-strip { display: flex; gap: 6px; }
.bag-stage-strip > span { display: grid; justify-items: center; gap: 4px; padding: 5px 7px; background: var(--paper-2); }
.bag-stage-strip small { font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bag-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; border-top: var(--rule); padding-top: 9px; }
.bag-legend span { display: flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bag-legend i { width: 9px; height: 9px; background: var(--rare); display: block; }
.stat-card.is-link { cursor: pointer; text-align: left; font-family: inherit; }
.stat-card.is-link:hover { background: var(--acid); }

/* kartu bibit di panel samping */
.seed-grid .crop-card { display: grid; gap: 12px; }
.crop-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; border: var(--rule); }
.crop-stage { display: grid; justify-items: center; gap: 5px; padding: 7px 2px; }
.crop-stage small { font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.crop-stage:last-child { background: #c7f03c40; }
.crop-main strong em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12px; }
.crop-note { color: var(--muted); font-style: italic; }
.tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tool-card { display: flex; align-items: center; gap: 10px; border: var(--rule-strong); padding: 10px; background: var(--paper); }
.tool-card strong { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-size: 15px; }
.tool-card small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: 3px; }
.tool-art { flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   LAYAR SEMPIT
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .fx-bar-meta { display: none; }
  .fx-statement { grid-template-columns: 1fr; align-items: start; }
  .fx-figures { grid-template-columns: 1fr 1fr; }
  .fx-figure:nth-child(2n) { border-right: 0; }
  .fx-figure:nth-child(-n+2) { border-bottom: 1px solid #f5f3ec1f; }
  .fx-notes { grid-template-columns: 1fr; gap: 18px; }
  .fx-field-row { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .fx-plant:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fx-plant:nth-child(2n+1) { padding-left: 0; }
  .fx-yard-scene { height: 160px; }
  .fx-tree { display: none; }
  .fx-beds { grid-template-columns: repeat(4, 1fr); }
  .fx-beds .plot:nth-child(6n) { border-right: 1px solid #4A2F19; }
  .fx-beds .plot:nth-child(4n) { border-right: 0; }
  .fx-beds .plot:nth-last-child(-n+6) { border-bottom: 1px solid #4A2F19; }
  .fx-beds .plot:nth-last-child(-n+4) { border-bottom: 0; }
  .tool-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fx-bar { gap: 14px; padding: 0 14px; }
  .fx-bar-nav { gap: 14px; margin-left: auto; }
  .fx-bar-nav a:nth-child(3) { display: none; }
  .fx-step { grid-template-columns: 62px 1fr; gap: 14px; }
  .fx-step-n { font-size: 28px; }
  .fx-dock { flex-direction: column; align-items: stretch; gap: 10px; }
  .fx-dock-copy { display: none; }
  .fx-dock-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .fx-btn { justify-content: center; padding: 13px 10px; font-size: 10px; letter-spacing: 0.1em; }
  body { padding-bottom: 76px; }
  .fx-yard-scene { height: 140px; }
  .fx-well { display: none; }
  .fx-beds { grid-template-columns: repeat(3, 1fr); }
  .fx-beds .plot { min-height: 104px; padding: 8px 4px 6px; }
  .fx-beds .plot:nth-child(4n) { border-right: 1px solid #4A2F19; }
  .fx-beds .plot:nth-child(3n) { border-right: 0; }
  .fx-beds .plot:nth-last-child(-n+4) { border-bottom: 1px solid #4A2F19; }
  .fx-beds .plot:nth-last-child(-n+3) { border-bottom: 0; }
}