/* ============================================================
   overlay.css — pola overlay, bottom sheet, dialog.
   Butuh: tokens.css, base.css, components.css

   Semua layar sekunder adalah overlay DI DALAM satu halaman,
   bukan route. Telegram bisa memuat ulang Mini App kapan saja
   dan URL kembali ke awal; kalau layar sekunder adalah halaman
   sendiri, pemain terlempar keluar.

   Tiga bentuk, tiga tugas:
     .fh-ov     full-screen  -> MODE  : ganti perlengkapan, chat, profil
     .fh-sheet  bottom sheet -> BACAAN: rincian stat, detail, filter
     .fh-dialog tengah       -> KONFIRMASI pendek yang harus sulit
                                ditutup tanpa sengaja

   Modal tengah ditolak sebagai pola utama: di layar 390px kartu
   mengambang kehilangan bentuknya, tombol close di pojok atas
   paling jauh dari jempol, dan konten panjang terasa sempit dari
   dua arah. Itu sebabnya .fh-dialog dibatasi ke konfirmasi saja.

   position:fixed DI DALAM elemen ber-transform jadi relatif
   terhadap elemen itu, bukan viewport. Di mode terskala
   #fh-stage punya transform, jadi semua overlay pindah ke
   absolute — lihat blok di bawah.
   ============================================================ */


/* ============================================================
   OVERLAY FULL-SCREEN
   ============================================================ */

.fh-ov{
  position:fixed;inset:0;
  z-index:var(--z-overlay);
  background:var(--pixel-bg);
  display:none;
}
.fh-ov.is-on{display:flex;flex-direction:column}

/* ---------- OVERLAY YANG MENYISIP ----------
   Menutupi HANYA daerah isi: header di atas dan bottom nav di bawah
   tetap berdiri. Dipakai layar sekunder yang isinya masih milik
   tab-nya sendiri — daftar anggota clan, misalnya — bukan mode
   terpisah seperti Chat, Profil, atau ganti perlengkapan.

   Bedanya bukan selera. Overlay penuh layar mengatakan "kamu keluar
   dari tab tadi"; itu benar untuk Chat, dan salah untuk daftar yang
   isinya justru milik tab yang barusan dibuka. Nav yang tetap
   terlihat juga mengembalikan jalan keluar kedua: pemain yang
   berubah pikiran di tengah daftar tidak harus mundur dulu.

   Angkanya dua-duanya diukur, bukan ditebak: --fh-hdr-h dipasang JS
   dari tinggi header sungguhan (header berisi bar XP yang tingginya
   ikut font sistem), dan tinggi nav ditambah safe-area supaya di
   iPhone dia tidak berhenti di atas garis home.

   ⚠ Overlay seperti ini membuat bottom nav BISA DISENTUH selama dia
   terbuka. openTab() di ui.js menutup seluruh tumpukan sebelum
   menukar layar; tanpa itu daftar yang terbuka akan tetap berdiri
   di atas layar yang baru. */
.fh-ov--sisip{
  inset:var(--fh-hdr-h,0px) 0 calc(var(--nav-h) + env(safe-area-inset-bottom)) 0;
}

/* Kolom flex tiga bagian. Footer TIDAK boleh position:fixed —
   dia akan menimpa konten dan terikat viewport, bukan stage. */
.fh-ov__top{
  flex:none;
  display:flex;align-items:center;gap:var(--sp-md);
  padding:var(--sp-md);
  background:var(--pixel-bg);
  border-bottom:1px solid var(--pixel-border);
}
/* OVERLAY YANG PUNYA BARIS SUB di bawah judulnya (hari ini: chat,
   dengan baris kategorinya).

   Garis bawah judul DICABUT, dan baris sub di bawahnya yang membawa
   satu-satunya batas ke isi. Dua garis sejajar berjarak ~40px
   terbaca sebagai dua bilah yang tidak berhubungan, dan baris sub
   yang terjepit di antaranya kehilangan bentuk — dia terlihat
   mengambang di atas isi alih-alih menjadi bagian dari kepala
   layar. Dengan satu garis, judul dan baris sub terbaca sebagai
   SATU bilah kepala, dan isinya jelas dimulai di bawah garis itu.

   Baris subnya sendiri yang wajib membawa border-bottom; kelas ini
   cuma mencabut yang di atasnya. */
.fh-ov--subbar .fh-ov__top{border-bottom:0}

.fh-ov__top h1{
  font-family:var(--font-pixel);font-size:11px;font-weight:400;
  flex:1;min-width:0;
}

/* min-height:0 diwarisi dari .fh-scroll-y di base.css.
   Tanpa itu scroll tidak pernah muncul. */
.fh-ov__body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  display:flex;flex-direction:column;
}
.fh-ov__body::-webkit-scrollbar{width:0}

.fh-ov__foot{
  flex:none;
  background:var(--pixel-bg);
  border-top:1px solid var(--pixel-border);
  padding:var(--sp-md) var(--sp-md) calc(var(--sp-md) + env(safe-area-inset-bottom));
}

/* Isi overlay dibatasi selebar kolom konten, sama seperti .fh-app. */
.fh-ov__body > *,
.fh-ov__foot > *{width:100%;max-width:var(--app-max);margin-inline:auto}

/* Satu bagian harus menyerap sisa ruang, kalau tidak footer
   naik-turun mengikuti tinggi isi. */
.fh-ov__fill{flex:1 0 auto}


/* ============================================================
   BACKDROP — dipakai bersama oleh sheet dan dialog
   ============================================================ */

.fh-backdrop{
  position:fixed;inset:0;
  z-index:var(--z-backdrop);
  background:var(--backdrop);
  opacity:0;pointer-events:none;
  transition:opacity .18s;
}
.fh-backdrop.is-on{opacity:1;pointer-events:auto}


/* ============================================================
   BOTTOM SHEET
   Untuk konten yang DIBACA. Menempel di dasar layar: sisi yang
   paling dekat jempol, dan bisa ditutup dengan gerakan ke bawah
   yang sudah jadi kebiasaan.
   ============================================================ */

.fh-sheet{
  position:fixed;left:50%;bottom:0;
  z-index:var(--z-sheet);
  width:100%;max-width:var(--app-max);
  max-height:78vh;
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translate(-50%,100%);
  opacity:0;pointer-events:none;
  transition:transform .22s ease-out,opacity .15s;
  box-shadow:var(--shadow-sheet);
}
.fh-sheet.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .fh-sheet{transition:opacity .15s}
}

/* Pegangan: penanda bahwa panel ini bisa ditarik turun. */
.fh-sheet__grab{
  flex:none;
  width:36px;height:4px;margin:7px auto 0;
  border-radius:2px;background:var(--pixel-border);
}

.fh-sheet__hd{
  flex:none;padding:var(--sp-md);text-align:center;
  border-bottom:1px solid var(--pixel-border);
}
.fh-sheet__hd h3{
  font-family:var(--font-pixel);font-size:10px;font-weight:400;letter-spacing:.5px;
}

.fh-sheet__body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:var(--sp-sm);
}
.fh-sheet__body::-webkit-scrollbar{width:0}

.fh-sheet__ft{
  flex:none;
  padding:var(--sp-md) var(--sp-md) calc(var(--sp-md) + env(safe-area-inset-bottom));
  border-top:1px solid var(--pixel-border);
}


/* ============================================================
   DIALOG TENGAH — konfirmasi pendek saja.
   "Jual semua ikan?", "Beli seharga 10 juta?"
   ============================================================ */

.fh-dialog{
  position:fixed;left:50%;top:50%;
  z-index:var(--z-sheet);
  width:calc(100% - 36px);max-width:344px;
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-xl);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translate(-50%,-50%) scale(.94);
  opacity:0;pointer-events:none;
  transition:transform .18s ease-out,opacity .15s;
  box-shadow:var(--shadow-sheet);
}
.fh-dialog.is-on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}

.fh-dialog__body{padding:var(--sp-lg) var(--sp-md);text-align:center}
.fh-dialog__body h3{
  font-family:var(--font-pixel);font-size:10px;font-weight:400;
  line-height:1.8;margin-bottom:var(--sp-sm);
}
.fh-dialog__body p{font-size:13px;color:var(--pixel-muted)}

/* Tinggi kedua tombol DISAMAKAN di sini, bukan di layar yang
   memakainya: .fh-btn 52px dan .fh-btn--ghost 42px berdampingan
   langsung terlihat salah, dan itu berlaku untuk dialog mana pun.
   Pola yang sama dengan .fh-tfoot di profile.css. */
.fh-dialog__ft{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-sm);
  padding:var(--sp-md);border-top:1px solid var(--pixel-border);
}
.fh-dialog__ft .fh-btn{height:46px;font-size:9px}
/* Satu tombol: kaki dialog aslinya dua kolom (BATAL | OK). Tanpa
   ini tombol tunggal cuma mengisi kolom kiri dan kolom kanannya
   kosong - terbaca seperti tombol yang lupa dipasang. */
.fh-dialog__ft--satu{grid-template-columns:1fr}


/* ============================================================
   BLOK KATEGORI — isi sheet "Rincian perlengkapan".
   Warna strip datang dari --c yang dipasang inline; ini
   satu-satunya tempat --c-rod dan kawan-kawan boleh muncul.
   ============================================================ */

.fh-eq{padding-bottom:var(--sp-sm)}
.fh-eq + .fh-eq{border-top:1px solid var(--pixel-border)}

.fh-eq__hd{
  display:flex;align-items:center;gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-md) 0;
}
.fh-eq__hd u{
  width:3px;height:14px;border-radius:1px;
  background:var(--c);flex-shrink:0;
}
.fh-eq__hd span{font-size:13px;font-weight:600}
.fh-eq__hd small{
  font-size:11px;color:var(--pixel-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 23px = lebar strip (3px) + gap (8px) + padding (12px):
   nilai sejajar dengan judul kategorinya. */
.fh-eq__body{padding:var(--sp-sm) var(--sp-md) 0 23px}
.fh-eq__body div{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-sm);padding:3px 0;
}
.fh-eq__body span{font-size:12px;color:var(--pixel-muted)}
.fh-eq__body b{
  font-size:12px;font-weight:600;color:var(--c);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}

/* Kategori yang sedang tidak aktif (mis. Boost belum dinyalakan):
   tetap ditampilkan supaya pemain tahu ada, tapi diredam. */
.fh-eq.is-off .fh-eq__hd span,
.fh-eq.is-off .fh-eq__body b{color:var(--pixel-muted)}
.fh-eq.is-off .fh-eq__body b{font-weight:400}


/* ============================================================
   MODE TERSKALA
   Di sini #fh-stage punya transform, jadi position:fixed akan
   mengikat ke stage, bukan viewport. Dijadikan absolute supaya
   perilakunya sama persis di kedua mode.
   ============================================================ */

body.fh-scaled .fh-ov,
body.fh-scaled .fh-backdrop,
body.fh-scaled .fh-sheet,
body.fh-scaled .fh-dialog,
body.fh-scaled .fh-toast{position:absolute}

/* vh mengukur jendela asli, bukan stage. Di mode terskala tinggi
   maksimum sheet harus persen terhadap stage. */
body.fh-scaled .fh-sheet{max-height:78%}

body.fh-scaled .fh-ov__body > *,
body.fh-scaled .fh-ov__foot > *{max-width:none}


/* ============================================================
   PAPAN PENGUMUMAN

   .fh-dialog biasa dipakai untuk PERTANYAAN (beli? jual?) dan
   bentuknya sengaja polos supaya pertanyaannya yang menonjol.
   Pengumuman kebalikannya: tidak menanyakan apa-apa, dan justru
   perlu terlihat seperti benda - papan yang ditempel di dinding -
   supaya terbaca sebagai kabar resmi, bukan dialog nyasar.

   Warnanya PERUNGGU (--medal-3), bukan emas. Emas dijatah untuk
   uang dan VIP di seluruh aplikasi; papan pengumuman berkilau
   emas akan terbaca seperti tawaran berbayar.
   ============================================================ */

.fh-papan{
  border-color:rgba(var(--medal-3-rgb),.55);
  box-shadow:
    0 0 0 3px var(--pixel-bg),
    0 0 0 4px rgba(var(--medal-3-rgb),.35),
    0 18px 40px rgba(0,0,0,.55);
}

/* Pita kepala: gradien perunggu dari kiri, memudar ke kanan -
   pola yang sama dengan kepala kartu VIP, cuma warnanya beda. */
.fh-papan__hd{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px var(--sp-md);
  background:linear-gradient(90deg,
    rgba(var(--medal-3-rgb),.28),
    rgba(var(--medal-3-rgb),.10) 55%,
    rgba(var(--medal-3-rgb),.22));
  border-bottom:1px solid rgba(var(--medal-3-rgb),.45);
}
.fh-papan__hd b{
  font-family:var(--font-pixel);font-size:10px;
  letter-spacing:1.5px;
  color:var(--medal-3);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.fh-papan__ico{width:17px;height:13px;fill:var(--medal-3);flex:none}

/* Paku di dua sudut atas. Kotak 5px dengan sisi terang di kiri-atas
   dan gelap di kanan-bawah - cara paling murah menggambar sesuatu
   yang menonjol dari bidang tanpa gambar. */
.fh-papan__paku{
  position:absolute;top:7px;
  width:5px;height:5px;
  background:var(--medal-3);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.45),
    inset -1px -1px 0 rgba(0,0,0,.45);
}
.fh-papan__paku--kiri{left:7px}
.fh-papan__paku--kanan{right:7px}

.fh-papan__body{padding:18px var(--sp-lg) 14px}

.fh-papan__judul{
  font-family:var(--font-pixel);font-size:11px;line-height:1.7;
  color:var(--pixel-text);
  margin:0;
}

/* Garis pemisah dengan bintang di tengah - hiasan kecil yang
   memisahkan judul dari isi tanpa menambah kotak baru. */
.fh-papan__garis{
  display:flex;align-items:center;gap:8px;
  margin:12px 0 12px;
  color:rgba(var(--medal-3-rgb),.7);
}
.fh-papan__garis i{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--medal-3-rgb),.5),transparent);
}
.fh-papan__garis b{font-size:11px;line-height:1}

/* Isi RATA KIRI walau induknya rata tengah: pengumuman bisa dua-
   tiga kalimat, dan paragraf rata tengah dengan baris yang
   panjangnya berbeda-beda lebih lambat dibaca. */
.fh-papan__isi{
  text-align:left;
  font-family:var(--font-ui);
  font-size:13px;line-height:1.6;
  color:var(--pixel-text);
  opacity:.92;
  margin:0;
}

.fh-papan__tgl{
  display:block;
  margin-top:14px;
  font-family:var(--font-pixel);font-size:7px;letter-spacing:.5px;
  color:var(--pixel-muted);
}
.fh-papan__tgl:empty{display:none}