/* ============================================================
   home.css — layar Home.
   Butuh: tokens.css, base.css, components.css, overlay.css

   Urutan layar: header → pratinjau chat + side rail → panel
   karakter + 3 slot → CTA → stats ringkas.

   Yang SENGAJA tidak ada di sini, beserta alasannya:
     - Banner Watch Ad. Pindah ke titik pemain memang butuh
       (energi habis, gagal ikan langka). Konversinya lebih tinggi
       dan game tidak terasa murah di detik pertama.
     - Kartu "Joined" / "Last Fishing". Data arsip, tempatnya Profil.
     - Progres koleksi. Sudah ada tab Bestiary.
     - Bar progres menuju cap +200%. Cap mungkin diubah nanti.
     - Baris buff di bawah nama karakter.
   ============================================================ */


/* ============================================================
   HEADER
   ============================================================ */

.fh-hdr{
  position:sticky;top:0;
  z-index:var(--z-hdr);              /* sticky tanpa z-index eksplisit akan tertimpa */
  background:var(--pixel-bg);
  border-bottom:1px solid var(--pixel-border);
  padding:14px var(--sp-md) var(--sp-sm);
  display:flex;align-items:center;gap:var(--sp-md);
}

/* Kolom, bukan kotak 40px mati.

   Penanda VIP di bawah foto butuh ruang. Kalau dipasang absolut
   dengan bottom negatif, dia menjulur melewati kotak isi header
   dan hampir menyentuh garis bawahnya. Sebagai kolom flex,
   pembungkusnya tumbuh sendiri mengikuti isinya dan tetap
   ditengahkan oleh .fh-hdr.

   Tinggi header tidak berubah: blok kanan (dua pil bertumpuk,
   59px) tetap yang tertinggi, sementara blok ini jadi 40+3+13 =
   56px. Mahkota tidak terpengaruh — dia absolut terhadap
   pembungkus ini, dan tepi atas pembungkus masih tepi atas foto. */
.fh-hdr__av{
  position:relative;flex-shrink:0;
  width:40px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.fh-hdr__av:active .fh-av{transform:scale(.93)}

/* .fh-av sendiri pindah ke components.css — Profil memakainya juga,
   di ukuran berbeda. */

/* Mahkota di ATAS avatar menandai VIP. Nama emas adalah penguat;
   badge teks "VIP" di samping nama sempat dicoba lalu dibuang
   karena menyampaikan hal yang sama dua kali. */
.fh-hdr__av.is-vip .fh-av{border:2px solid var(--pixel-primary)}
.fh-hdr__crown{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:18px;height:13px;
  /* dua drop-shadow tipis warna latar: mahkota tetap terbaca
     walau berdiri di atas tepi avatar yang terang */
  filter:drop-shadow(0 0 2px var(--pixel-bg)) drop-shadow(0 0 2px var(--pixel-bg));
}

.fh-hdr__mid{flex:1;min-width:0}
.fh-hdr__name{display:flex;align-items:center;gap:6px}
.fh-hdr__name b{
  font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fh-hdr__name.is-vip b{color:var(--pixel-primary)}

.fh-hdr__xp{display:flex;align-items:center;gap:var(--sp-sm);margin-top:6px}
.fh-hdr__xp small{font-size:10px;color:var(--pixel-muted);flex-shrink:0}

/* align-items:stretch memaksa kedua pil sama lebar; dipadu
   margin-left:auto pada angka (lihat .fh-chip b), angkanya jadi
   sejajar vertikal dan dua pil terbaca sebagai satu blok.

   Level ditaruh di sini, bukan sebagai badge di bawah avatar:
   angkanya bisa 3-4 digit dan akan melebar melewati avatar.

   Pil ditengahkan terhadap SELURUH isi header, bukan sejajar
   baris nama, karena blok avatar menjulur ke bawah. */
.fh-hdr__right{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:stretch;gap:5px;
}
.fh-hdr__right .fh-chip.is-coin b{color:var(--pixel-primary)}


/* ============================================================
   BARIS ATAS — pratinjau chat + side rail
   ============================================================ */

.fh-topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-sm);margin-bottom:var(--sp-sm);min-height:34px;
}

/* Chat naik jadi ikon header, bukan tab nav: bukan tujuan harian
   jadi tidak layak dapat slot nav. */
.fh-board{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:8px;height:34px;padding:0 8px;
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-md);
  color:var(--pixel-text);text-align:left;
}
.fh-board:active{background:var(--pixel-raised)}
.fh-board__ico{position:relative;font-size:14px;line-height:1;flex-shrink:0}
.fh-board__txt{
  flex:1;min-width:0;display:flex;gap:5px;align-items:baseline;
  transition:opacity .22s;
}
.fh-board__txt.is-fade{opacity:0}
.fh-board__txt b{font-size:12px;font-weight:600;flex-shrink:0}
.fh-board__txt b.is-vip{color:var(--pixel-primary)}
.fh-board__txt span{
  font-size:12px;color:var(--pixel-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Baris PENGUMUMAN di pratinjau. Diwarnai tier ikannya (--tw
   dipasang home.js) supaya sekilas terbaca berbeda dari pesan
   orang — di baris setinggi 34px tidak ada ruang untuk penanda
   lain, dan warna adalah satu-satunya yang tidak memakan tempat. */
.fh-board__txt span.is-sys{color:var(--tw,var(--pixel-text));font-weight:500}
@media (prefers-reduced-motion:reduce){
  .fh-board__txt{transition:none}
}


/* ============================================================
   SIDE RAIL
   Pola dari game mobile: tombol mengambang untuk hal temporer
   (event musiman) tanpa merombak nav setiap kali.

   Isinya TIGA: Iklan, Event, Rank. Default TERBUKA — toggle di
   sini alat untuk MENYINGKIRKAN, bukan menyembunyikan. Iklan =
   pendapatan, event = engagement, rank = alasan kembali besok;
   menyembunyikan ketiganya sendiri bertentangan dengan tujuan.

   Konsekuensi yang harus diingat: iklan sekarang butuh dua tap.
   Kalau pendapatan iklan turun, itu penyebabnya — solusinya
   keluarkan Iklan dari dropdown jadi tombol tetap.

   Konsekuensi kedua, dan ini yang lahir bersama Rank: rail terbuka
   sekarang memakan 197px dari 366px lebar isi, jadi kolom pratinjau
   chat di sebelahnya tinggal ~160px — turun dari ~213px waktu
   isinya masih dua. Pratinjaunya tetap terbaca (nama + potongan
   pesan, sisanya ellipsis), tapi ini batasnya. Item KEEMPAT tidak
   muat: bukan railnya yang rusak, pratinjau chatnya yang tinggal
   nama. Kalau harus ada yang keempat, yang dikorbankan pratinjau
   chat — jadikan dia ikon saja saat rail terbuka.
   ============================================================ */

/* align-items:center, BUKAN flex-start.

   Saat dropdown tertutup, .fh-rail__more hanya dinolkan lebarnya
   (max-width:0) — tingginya tetap ~44px karena tombol IKLAN dan
   EVENT masih berdiri di dalamnya. Jadi rail selalu setinggi
   tombol terbesarnya, bukan setinggi toggle 34px yang terlihat.

   Dengan flex-start, toggle menempel di puncak rail sementara
   kolom chat ditengahkan oleh .fh-topbar, dan selisihnya
   (44−34)÷2 = 5px ke atas. Menengahkan di sini membuat pusat
   toggle bertemu pusat kolom chat di kedua keadaan — tertutup
   maupun terbuka — tanpa mengunci tinggi apa pun.

   Jangan "perbaiki" dengan menolkan tinggi .fh-rail__more saat
   tertutup: tinggi baris jadi berubah 44px <-> 34px setiap kali
   dropdown dibuka, dan seluruh isi layar ikut tersentak. */
.fh-rail{display:flex;flex-direction:row;align-items:center;gap:6px;flex-shrink:0}

.fh-rail button{
  width:46px;padding:5px 2px 4px;
  border:1px solid var(--pixel-border);border-radius:var(--r-lg);
  background:rgba(var(--bg-rgb),.9);
  color:var(--pixel-text);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  position:relative;flex-shrink:0;
}
.fh-rail button:active{transform:scale(.94)}
.fh-rail__ic{width:20px;height:20px;display:grid;place-items:center;font-size:15px;line-height:1}
.fh-rail small{font-size:7px;color:var(--pixel-muted);letter-spacing:.2px}
.fh-rail .is-ready{border-color:var(--pixel-primary)}

/* Jatah habis. Diredupkan, TIDAK disembunyikan dan TIDAK
   di-disable: tombol yang lenyap membuat rail berganti tinggi tiap
   kali jatahnya habis, dan tombol yang mati tidak bisa menjelaskan
   kenapa dia mati. Yang ini tetap bisa ditekan - handler-nya yang
   menjawab "jatah kembali tengah malam WIB". Warna perbatasannya
   sudah ditangani .is-ready yang ikut dicopot. */
.fh-rail button.is-habis{opacity:.45}

/* padding + margin negatif seukuran tonjolan badge: tanpa itu
   overflow:hidden yang dipakai untuk animasi lebar akan memotong
   badge angkanya. */
.fh-rail__more{
  display:flex;flex-direction:row;gap:6px;align-items:flex-start;
  max-width:0;overflow:hidden;opacity:0;
  padding:7px 7px 0 0;margin:-7px -7px 0 0;
  transition:max-width .24s ease,opacity .18s;
}
/* 3 tombol x 46px + 2 gap x 6px = 150, plus 7px padding kanan
   milik ruang badge di atas. Angka ini WAJIB ikut naik setiap
   kali isi rail bertambah: kelebihannya tidak bergejala, tapi
   kekurangannya memotong tombol terakhir tanpa error. */
.fh-rail__more.is-on{max-width:160px;opacity:1}
@media (prefers-reduced-motion:reduce){
  .fh-rail__more{transition:none}
}

/* Toggle bulat membawa badge angka gabungan (mis. 4 = 3 iklan +
   1 event). Badge itu penting: tanpa angka, menu tertutup tidak
   punya daya tarik untuk dibuka. */
/* Ditulis .fh-rail button.fh-rail__toggle, bukan .fh-rail__toggle
   saja. Aturan .fh-rail button di atas bernilai (0,1,1); satu
   kelas tunggal cuma (0,1,0) dan KALAH — lebar 46px, padding, dan
   radius kotaknya ikut terbawa ke sini tanpa gejala apa pun.
   Menyamakan berat dulu, baru menimpa. */
.fh-rail button.fh-rail__toggle{
  width:34px;height:34px;padding:0;
  border-radius:50%;
  justify-content:center;
}
.fh-rail__toggle .fh-rail__chev{
  font-size:13px;color:var(--pixel-muted);
  transition:transform .22s;transform:rotate(90deg);
}
.fh-rail__toggle.is-on .fh-rail__chev{transform:rotate(-90deg)}
.fh-rail__toggle.is-on .fh-badge{display:none}


/* ============================================================
   DEK — dua halaman panel yang menempati satu tempat

   Halaman 1 karakter, halaman 2 museum (isinya di museum.css).
   Yang tinggal di sini cuma mekanik geserannya, dan itu memang
   milik Home: dek ini wadah, bukan bagian dari museum. Halaman
   ketiga nanti tidak butuh satu baris pun tambahan di sini.

   TINGGI DEK DITENTUKAN HALAMAN KARAKTER, dan itu syarat yang
   dijaga, bukan kebetulan: panggung karakter punya tinggi tetap
   (clamp di kaki berkas ini) dan baris equipment di bawahnya
   menambah tinggi isinya sendiri, sementara halaman museum tidak
   punya tinggi minimum sama sekali — raknya flex:1 dengan
   min-height:0 dan menggulung di dalam dirinya sendiri. Jadi
   halaman museum SELALU memuai mengikuti halaman karakter, tidak
   pernah sebaliknya, dan tinggi dek tidak pernah berubah saat
   halaman bergeser.

   ⚠ Halaman ketiga nanti WAJIB ikut aturan itu: isinya boleh
   setinggi apa pun asal punya min-height:0 dan menggulung sendiri.
   Halaman yang memaksa tinggi lebih besar akan menyisakan ruang
   kosong di bawah panggung karakter — gejalanya muncul di halaman
   yang tidak disentuh sama sekali.
   ============================================================ */

.fh-deck{
  overflow:hidden;
  /* pan-y menyerahkan gulungan tegak ke halaman dan menyisakan
     arah mendatar untuk dek. Tanpa ini browser menahan sentuhan
     sampai tahu arah yang dimaksud, dan geseran pertama selalu
     terasa telat setengah detik. */
  touch-action:pan-y;
}

.fh-deck__track{
  display:flex;align-items:stretch;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}

/* Saat jari masih menempel, panel mengikuti jari — transisi
   dimatikan supaya tidak ada jeda antara gerak jari dan gerak
   panel. Dinyalakan lagi begitu jari lepas, dan sisa geserannya
   yang dianimasikan. */
.fh-deck__track.is-drag{transition:none}

@media (prefers-reduced-motion:reduce){
  .fh-deck__track{transition:none}
}

.fh-deck__page{flex:0 0 100%;max-width:100%;min-width:0;display:flex}

/* Halaman yang tidak sedang dibuka tetap ada di DOM (dia yang
   digeser masuk), tapi tidak boleh menerima tap yang meleset di
   tepi layar saat geseran sedang berjalan. */
.fh-deck__page[aria-hidden="true"]{pointer-events:none}

.fh-deck__page > .fh-chr{flex:1;min-width:0;display:flex;flex-direction:column}


/* ---------- PENUNJUK HALAMAN ----------
   Titik di tengah menandakan halaman ke berapa yang sedang dibuka,
   panah di kedua ujung yang memindahkannya.

   Grid tiga kolom 1fr-auto-1fr, BUKAN flex space-between: dua kolom
   sisi yang dipaksa sama lebar membuat titik berdiri tepat di tengah
   baris walaupun kedua panah tidak pernah sama lebar isinya.

   Baris ini duduk di TENGAH jarak antara panel di atasnya dan tombol
   CTA di bawahnya. Jaraknya dihitung sampai ke TITIKNYA, bukan
   sampai ke kotak tombolnya: yang dilihat mata kepingnya, sementara
   padding di sekeliling keping cuma sasaran jempol yang tidak
   terlihat sama sekali. */
.fh-deck__bar{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-top:var(--sp-sm);
}

/* TANPA LABEL. Panah yang berdiri sendiri di ujung baris sudah
   mengatakan seluruh maksudnya lewat arahnya; nama halaman tujuan di
   sebelahnya cuma mengulang apa yang akan terlihat sedetik
   kemudian — dan dia memakan selebar baris untuk melakukannya. */
.fh-deck__arw{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border:1px solid var(--pixel-border);border-radius:50%;
  background:var(--pixel-surface);
  color:var(--pixel-text);
  transition:opacity .18s,color .18s,border-color .18s;
}
.fh-deck__arw--prev{justify-self:start}
.fh-deck__arw--next{justify-self:end}

/* Satu bentuk chevron untuk dua arah: yang ke kiri dibalik, bukan
   digambar ulang. Dua path yang harus cermin satu sama lain adalah
   dua path yang bisa menyimpang. */
.fh-deck__arw--prev .fh-deck__chev{transform:scaleX(-1)}
.fh-deck__chev{
  width:5px;height:9px;flex:none;
  fill:currentColor;shape-rendering:crispEdges;
}

/* Panah yang HIDUP berwarna emas, ke arah mana pun dia menunjuk —
   di halaman pertama yang hidup panah kanan, di halaman museum
   panah kiri, dan yang dicari mata selalu satu-satunya keping yang
   masih bisa ditekan.

   Emasnya cuma di goresan dan garis tepi, tidak diisi: tombol emas
   penuh sudah dipakai CTA "LANJUT MANCING" tepat di bawahnya, dan
   dua bidang emas berdampingan membuat keduanya berhenti menonjol. */
.fh-deck__arw:not([disabled]){
  color:var(--pixel-primary);
  border-color:rgba(var(--primary-rgb),.45);
}
.fh-deck__arw[disabled]{opacity:.26;cursor:default}
.fh-deck__arw:not([disabled]):active{transform:scale(.9)}

.fh-deck__dots{display:flex;align-items:center;gap:2px}

/* Titiknya 7px, tapi yang ditekan tombolnya — padding di
   sekelilingnya yang membuat sasarannya cukup besar untuk jempol
   tanpa membesarkan titiknya sendiri. */
.fh-deck__dot{display:flex;align-items:center;padding:8px 4px}
.fh-deck__dot i{
  display:block;width:7px;height:7px;border-radius:50%;
  background:var(--pixel-border);
  transition:width .24s,background .24s,border-radius .24s;
}
/* Yang aktif MEMANJANG, bukan sekadar berganti warna. Dua titik
   yang cuma beda warna masih terbaca sebagai dua titik; satu yang
   memanjang terbaca sebagai "kamu di sini". */
.fh-deck__dot.is-on i{width:18px;border-radius:4px;background:var(--pixel-primary)}

@media (prefers-reduced-motion:reduce){
  .fh-deck__dot i{transition:none}
}


/* ============================================================
   PANEL KARAKTER
   Sprite karakter jadi hero, BUKAN tangkapan terakhir.

   Equipment tidak digambar menempel di sprite: 7 karakter × 16
   joran = 112 sprite, tidak realistis. Sprite berdiri sendiri,
   equipment jadi ikon terpisah di bawahnya.
   ============================================================ */

/* SATU BINGKAI membungkus panggung DAN tiga slot equipment, bukan
   dua kotak bertetangga. Keduanya menjelaskan satu hal — siapa yang
   sedang dipakai dan dengan apa — dan bingkai yang sama menyatukan
   bacaannya.

   Warna bingkai mengikuti TIER karakter (--tier diisi JS), jadi
   Sultan berbingkai emas dan karakter secret berbingkai ungu. Ini
   penanda yang sama yang sudah dipakai badge tier di bawah namanya,
   cuma dinaikkan ke bidang yang lebih besar. */
.fh-chr{
  position:relative;
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-lg);
  overflow:hidden;
}

/* Garis bingkai berwarna tier. Pseudo-element, BUKAN border di
   .fh-chr sendiri: border tidak bisa dibuat semi-transparan tanpa
   kanal rgb terpisah untuk kesembilan tier, sementara elemen
   berlapis cukup diberi opacity. Warna penuh di border 1px terbaca
   terlalu keras — di 45% dia jadi penanda, bukan garis neon. */
.fh-chr::after{
  content:'';position:absolute;inset:0;z-index:3;
  pointer-events:none;
  border:1px solid var(--tier,var(--pixel-border));
  border-radius:inherit;
  opacity:.45;
}

/* Siku di empat sudut. Delapan lapis gradient, bukan delapan
   elemen: sudut hiasan tidak layak menambah delapan node ke DOM
   yang digambar ulang tiap kali karakter berganti.

   inset 5px supaya sikunya duduk DI DALAM garis bingkai, bukan
   menimpanya — dua garis yang berimpit terbaca sebagai garis tebal
   yang salah gambar, bukan sebagai hiasan. */
.fh-chr::before{
  content:'';position:absolute;inset:5px;z-index:3;
  pointer-events:none;
  --g:linear-gradient(var(--tier,var(--pixel-border)),
                      var(--tier,var(--pixel-border)));
  background:
    var(--g) 0 0        /15px 2px no-repeat,
    var(--g) 0 0        /2px 15px no-repeat,
    var(--g) 100% 0     /15px 2px no-repeat,
    var(--g) 100% 0     /2px 15px no-repeat,
    var(--g) 0 100%     /15px 2px no-repeat,
    var(--g) 0 100%     /2px 15px no-repeat,
    var(--g) 100% 100%  /15px 2px no-repeat,
    var(--g) 100% 100%  /2px 15px no-repeat;
  opacity:.75;
}

.fh-stage{
  position:relative;overflow:hidden;
  width:100%;height:360px;
  /* Gelap di tepi, sedikit lebih terang di puncak. Warna tier
     datang dari lapisan di atasnya, bukan dari sini — panggung
     yang seluruhnya berwarna tier akan berkelahi dengan sprite
     emas yang berdiri di depannya. */
  background:linear-gradient(180deg,
    var(--pixel-raised),var(--pixel-sunken));
  display:grid;place-items:center;
  border-bottom:1px solid var(--pixel-border);
  cursor:pointer;
}
.fh-stage:active{background:var(--pixel-border)}

/* LATAR PANGGUNG = PENDAR WARNA TIER, bukan gambar.

   ⚠ Sebelumnya ini berkas <id>-bg dari sprite yang diblur, dan
   dicabut setelah beberapa putaran: apa pun perlakuannya, latar
   yang isinya karakter yang sama selalu berkelahi dengan sprite di
   depannya — dan tiap perbaikan menukar satu masalah dengan
   masalah lain (bercak gelap, kisi-kisi bilinear, panggung nyaris
   hitam). Warna tier menyelesaikannya di akar: yang perlu
   disampaikan latar ini memang KELAS karakternya, bukan gambarnya
   lagi. Nol aset, nol unduhan, dan otomatis benar untuk ketujuh
   karakter sekaligus.

   --tier diisi JS lewat FH.tierVar(). Dia WARNA RATA, bukan
   tierFill(): celestial mengembalikan dua gradient bertumpuk dari
   tierFill, dan gradient tidak sah sebagai titik henti di dalam
   gradient lain. */
.fh-stage__bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 84% 64% at 50% 44%,
    var(--tier,var(--pixel-raised)),transparent 72%);
  /* .55 diukur, bukan dikira: di .40 warna tier nyaris tidak
     terbaca di balik sprite emas, di .70 panggung mulai berebut
     perhatian dengan sprite yang berdiri di depannya. */
  opacity:.55;
}

/* Garis pindai halus. */
.fh-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0 15px,var(--scanline) 15px 30px);
}

/* Gradasi gelap di dasar panggung. Sprite berlatar transparan
   jadi tidak terlihat melayang, dan tiap sprite tidak perlu
   digambar bayangannya sendiri. */
.fh-stage::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  pointer-events:none;
  background:linear-gradient(to top,rgba(var(--bg-rgb),.85),transparent);
}

/* Kanvas sumber persegi (448×448), jadi wadahnya persegi juga.
   object-fit:contain menjaga proporsi berapa pun rasio isinya —
   chibi dengan efek melingkar lebih lebar dari yang diperkirakan.

   Ini ilustrasi halus, BUKAN pixel art: kelas .fh-hd-art di
   elemen img yang menentukan, bukan aturan di sini. */
.fh-sprite{
  position:relative;z-index:1;
  height:clamp(190px,60vw,250px);
  aspect-ratio:1;width:auto;
  object-fit:contain;border:0;
}

.fh-chr__name{
  position:absolute;left:0;right:0;bottom:var(--sp-md);
  text-align:center;z-index:2;
}
.fh-chr__name b{font-family:var(--font-pixel);font-size:12px;display:block}
.fh-chr__name .fh-tier{margin-top:7px}


/* ============================================================
   SLOT EQUIPMENT
   TIGA slot (joran, kail, umpan), bukan empat: karakter sudah
   jadi panggung sendiri dan tidak perlu diulang sebagai slot
   kecil. Tiga slot bikin ikon lebih besar dan lebih enak di-tap.

   gap:1px di atas latar border = garis pemisah tanpa border
   ganda di antara sel.
   ============================================================ */

.fh-load{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--pixel-border);
}
.fh-slot{
  background:var(--pixel-surface);
  padding:6px 4px 8px;text-align:center;
  cursor:pointer;position:relative;
}
.fh-slot .fh-tile{
  width:var(--gear-ico);height:var(--gear-ico);
  margin:0 auto 3px;
}

/* ASETNYA MENGISI PENUH KOTAK — padding 8% bawaan dicabut di sini.

   .fh-tile__img--gear memberi padding:8% (components.css), dan itu
   BENAR untuk tempat asalnya: grid empat kolom di overlay ganti
   perlengkapan, tempat tujuh umpan berbeda bentuk harus terbaca
   satu keluarga. Di slot Home tidak ada grid — cuma TIGA kotak yang
   masing-masing berdiri sendiri, dan tidak ada keluarga yang perlu
   dirapikan.

   Yang tertinggal cuma ruginya, dan ruginya berlipat karena
   margin di sini ADA DUA LAPIS: convert_gear.py sudah memanggang
   4% ke berkasnya, lalu padding 8% menumpuk di atasnya. Hasilnya
   ilustrasi cuma mengisi 78% lebar kotak — di kotak 66px itu 51px,
   berhenti 7,5px dari tepi. Dicabut, dia jadi 93% (61px).

   TIDAK dijadikan 0 di berkasnya sendiri (pad 4% di
   convert_gear.py): .fh-tile memakai overflow:hidden dengan sudut
   membulat 7px, dan .fh-tile__img menggambar halo
   drop-shadow(0 0 2px). Tanpa margin panggang itu halonya terpotong
   tepi kotak, dan aset yang bentuknya persegi kehilangan sudutnya. */
.fh-slot .fh-tile__img--gear{padding:0}
.fh-slot em{
  display:block;font-size:9px;color:var(--pixel-muted);font-style:normal;
  text-transform:uppercase;letter-spacing:.4px;line-height:1.2;
}
.fh-slot b{
  display:block;font-size:11px;font-weight:500;margin-top:1px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* min-height menjaga tinggi baris tetap sama walau slot ini
   kebetulan tidak punya angka enhance. Slot umpan menampilkan
   jumlah (×12), konsisten dengan notasi +7 dan +4 di slot lain. */
.fh-slot__enh{
  display:block;margin-top:2px;min-height:10px;line-height:1;
  font-family:var(--font-pixel);font-size:8px;color:var(--pixel-primary);
}


/* ============================================================
   CTA
   Memanggil Telegram.WebApp.close(). Catatan kecil di bawahnya
   supaya pemain tidak mengira tombol ini memulai mancing di
   dalam Mini App.
   ============================================================ */

/* .fh-cta sendiri pindah ke components.css — layar Tas memakai
   bentuk tombol yang sama untuk JUAL CEPAT. Yang tinggal di sini
   cuma catatan kecil di bawahnya, dan itu memang khusus Home. */
/* CTA di Home menempel lebih rapat daripada bawaan .fh-cta, dan itu
   khusus Home: di layar ini tombolnya tidak lagi mengikuti panel,
   melainkan mengikuti BARIS PENUNJUK HALAMAN — dan baris itu harus
   duduk di tengah, bukan menempel ke panel di atasnya.

   Ditulis lewat pembungkus layarnya, BUKAN lewat #fh-cta: layar Tas
   memakai .fh-cta yang sama untuk JUAL CEPAT dan di sana tidak ada
   baris penunjuk apa pun yang perlu diberi ruang. */
.fh-screen[data-fh-screen="home"] .fh-cta{margin-top:var(--sp-sm)}

/* TOMBOL BERSUB-BARIS.
   Keterangan "Menutup Mini App dan kembali ke bot" dulu sebaris <p>
   di bawah tombol. Kalimat itu menjelaskan apa yang terjadi kalau
   tombolnya ditekan, jadi tempatnya memang di badan tombol; di luar
   dia terbaca sebagai catatan kaki layar dan menyisipkan satu blok
   teks lagi di antara CTA dan bagian Stats.

   Tingginya TIDAK dinaikkan dari 52px milik .fh-btn: dua baris
   pendek muat utuh di dalamnya, dan tombol utama yang tumbuh cuma
   karena keterangannya masuk berarti keterangan itu memungut ruang
   layar untuk kedua kalinya. */
.fh-cta--sub{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:5px;line-height:1.2;
}

/* opacity, bukan warna kedua di atas emas: --ink-on-primary sudah
   diukur terhadap bidang emas, dan menurunkannya lewat alpha
   menjaga hubungan itu utuh tanpa menambah token yang harus ikut
   diperiksa setiap kali warna aksi berubah. */
.fh-cta__sub{
  font-family:var(--font-ui);font-size:10px;font-weight:500;
  letter-spacing:0;opacity:.72;
}


/* ============================================================
   STATS RINGKAS
   Hanya EMPAT total. Rincian per kategori ada di bottom sheet:
   versi awal menampilkan semuanya inline dan itu kepanjangan —
   gejala salah tempat. Rincian paling berguna saat sedang
   MENGGANTI equipment, bukan saat baru buka app.
   ============================================================ */

.fh-totals{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--pixel-border);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-lg);overflow:hidden;
  margin-bottom:var(--sp-sm);
}
.fh-totals div{background:var(--pixel-surface);padding:var(--sp-md) 2px;text-align:center}
.fh-totals span{
  display:block;font-size:9px;color:var(--pixel-muted);
  text-transform:uppercase;letter-spacing:.4px;
}
.fh-totals b{
  display:block;margin-top:6px;white-space:nowrap;
  font-family:var(--font-pixel);font-size:11px;color:var(--pixel-primary);
}
.fh-totals b em{font-size:8px;font-style:normal;margin-left:1px}


/* ============================================================
   TINGGI PANGGUNG — hanya mode native.
   min-height menang atas max-height, dan itu dipakai sengaja:
   panggung berhenti mengecil di batas tertentu lalu halaman
   menggulung, bukan gepeng.

   Jangan gabungkan aspect-ratio dengan max-height di sini —
   browser akan menyusutkan lebar demi mempertahankan rasio dan
   panggung tidak lagi memenuhi induknya.
   ============================================================ */

body:not(.fh-scaled) .fh-stage{
  height:clamp(260px,calc(var(--tg-viewport-stable-height,100dvh) * .46),400px);
}