/* ============================================================
   base.css — reset, tipografi, kerangka layar, utility.
   Butuh: tokens.css
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

html,body{background:var(--pixel-bg)}

body{
  color:var(--pixel-text);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Tombol dan input tidak mewarisi font secara otomatis. */
button,input,textarea,select{font-family:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block}

/* ATRIBUT `hidden` HARUS MENANG.

   Dua baris di atas memberi img dan svg `display:block`, dan aturan
   author sekecil apa pun mengalahkan `[hidden]{display:none}` milik
   browser. Akibatnya <svg hidden> tetap tergambar — pernah terjadi
   pada mahkota VIP di kartu profil pemain, yang muncul untuk semua
   orang.

   Ditulis SESUDAH keduanya, bukan sebelum: selektor atribut sudah
   lebih spesifik daripada selektor tag, dan urutan ini membuatnya
   menang tanpa perlu !important — jadi komponen yang memang perlu
   menimpanya masih bisa (lihat .fh-composer[hidden] di chat.css). */
[hidden]{display:none}


/* ============================================================
   RENDER GAMBAR
   Dua jenis aset dengan kebutuhan berlawanan.

   image-rendering DIWARISI. Pasang kelas ini langsung di elemen
   <img>, jangan di pembungkusnya — salah pasang memberi gejala
   terbalik: pixel art jadi buram, ilustrasi jadi bergerigi.
   ============================================================ */

/* Pixel art: ikon nav. Harus tetap tajam saat diperbesar. */
.fh-px-art{image-rendering:pixelated}

/* Ilustrasi halus: joran, kail, umpan, karakter, ikan.
   Aset ini BUKAN pixel art (lihat ASSET_SPEC 2 dan 3). */
.fh-hd-art{image-rendering:auto;-ms-interpolation-mode:bicubic}


/* ============================================================
   KERANGKA LAYAR — HYBRID
   <=480px : mode native. Tanpa penskalaan, layout mengalir
             normal, teks ukuran asli. Ini yang dialami hampir
             semua pemain (Android umumnya melapor 360-412px,
             Telegram Desktop sekitar 400px).
   >480px  : scale-to-fit. Stage 390x800 diskalakan lewat
             transform, dijepit 1x-1.25x.

   Kelas .fh-scaled dipasang oleh js/ui.js. CSS di bawah hanya
   aktif kalau kelas itu ada.
   ============================================================ */

#fh-fit{display:block}
#fh-stage{width:auto;height:auto;position:relative;background:var(--pixel-bg)}
#fh-scroll{overflow:visible}

/* Kolom konten. Bottom nav ikut di dalam alur, jadi .fh-app
   harus kolom flex penuh tinggi. */
.fh-app{
  max-width:var(--app-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Mendorong bottom nav ke dasar saat konten pendek. */
.fh-grow{flex:1 1 auto}

/* ---- LAYAR UTAMA ----
   Satu tab = satu .fh-screen. Yang berganti hanya bagian ini;
   header di atas dan bottom nav di bawah tetap berdiri, karena
   itulah bedanya BERPINDAH TAB dengan MEMBUKA OVERLAY.

   display:flex, bukan block: sebelum ada pembungkus ini isi Home
   adalah anak langsung .fh-app yang juga kolom flex. Di dalam
   kolom flex margin tidak pernah menyatu; kalau pembungkusnya
   dijadikan blok biasa, margin CTA dan margin catatan di bawahnya
   akan saling menyerap dan jarak antar bagian berubah sendiri
   tanpa satu baris CSS pun ikut diubah. */
.fh-screen{display:none;flex-direction:column}
.fh-screen.is-on{display:flex}

/* ---- mode terskala (desktop / jendela lebar) ---- */
body.fh-scaled{overflow:hidden;background:var(--pixel-void);height:100%}

body.fh-scaled #fh-fit{
  position:fixed;inset:0;display:flex;
  justify-content:center;align-items:flex-start;overflow:hidden;
}

body.fh-scaled #fh-stage{
  width:var(--stage-w);
  overflow:hidden;
  transform-origin:top center;
  border-left:1px solid var(--pixel-border);
  border-right:1px solid var(--pixel-border);
}

/* Scrollbar disembunyikan, BUKAN scroll-nya dimatikan: kontennya
   tetap bisa digulung dengan roda, sentuh, dan keyboard.

   Alasannya bukan selera. Stage ini meniru layar HP, dan di HP
   tidak ada batang gulung permanen — sebatang garis abu-abu di
   tepi kanan langsung membocorkan bahwa ini halaman web di dalam
   jendela desktop. Di mode native (<=480px) yang menggulung
   adalah dokumen itu sendiri, dan webview Telegram memakai
   scrollbar melayang yang hilang sendiri, jadi tidak perlu
   diapa-apakan.

   Perlu dua properti karena tidak ada satu pun yang didukung
   semua mesin: scrollbar-width untuk Firefox, pseudo-element
   untuk Chrome/Safari/Edge. */
body.fh-scaled #fh-scroll{
  height:100%;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;         /* Firefox */
  -ms-overflow-style:none;      /* Edge lama */
}
body.fh-scaled #fh-scroll::-webkit-scrollbar{width:0;height:0}

body.fh-scaled .fh-app{max-width:none;margin:0;min-height:100%}


/* ============================================================
   MEDIA QUERY
   HANYA untuk mode native — selalu tulis body:not(.fh-scaled).
   Di mode terskala media query mengukur jendela asli, bukan
   stage, jadi hasilnya menyesatkan.
   ============================================================ */

@media (max-width:360px){
  body:not(.fh-scaled){--sp-md:10px;--sp-lg:12px;--gear-ico:60px}
}


/* ============================================================
   UTILITY
   ============================================================ */

.fh-scroll-y{
  flex:1 1 auto;
  min-height:0;              /* WAJIB: tanpa ini elemen flex tidak mau
                                menyusut di bawah tinggi kontennya dan
                                scroll tidak pernah muncul */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fh-scroll-y::-webkit-scrollbar{width:0}

.fh-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fh-num{font-variant-numeric:tabular-nums}

.fh-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Judul bagian. */
.fh-sec{padding:var(--sp-lg) var(--sp-md) 0}
.fh-sec__hd{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--sp-sm);
}
.fh-sec__hd h2{
  font-family:var(--font-pixel);font-size:9px;font-weight:400;
  letter-spacing:.5px;color:var(--pixel-muted);text-transform:uppercase;
}
.fh-sec__hd a,.fh-sec__hd button{
  font-size:12px;color:var(--pixel-primary);
}