/* ============================================================
   tas.css — layar Tas: isi hasil mancing.
   Butuh: tokens.css, base.css, components.css, overlay.css

   Yang perlu diingat soal layar ini: dia BUKAN alat banding
   seperti overlay perlengkapan, dan BUKAN katalog seperti
   Bestiary nanti. Dia sebuah GUDANG — pemain datang untuk dua
   hal saja: melihat apa yang barusan dia dapat, dan mengosongkan
   tas supaya bisa mancing lagi.

   Warna tier mengisi SELURUH kotak, sama seperti kotak equipment
   di Home. Bedanya cuma dari mana warnanya diambil: equipment
   dari LEVEL (--g-1..4), ikan dari TIER (--t-*). Dua sistem
   terpisah, dan memang tidak boleh dicampur.
   ============================================================ */


/* ============================================================
   BARIS ATAS — dua laci + pengurut

   Perjalanan sampai ke bentuk ini, supaya tidak diulang:
     1. Chip per tier di satu baris. Tidak muat — sembilan tier
        plus "Semua" melewati 390px, barisnya terpotong di tengah
        chip dan tombol urut ikut terjepit.
     2. Bottom sheet. Muat, tapi salah rasa: memilih kategori
        adalah tindakan sekilas, dan panel yang naik dari dasar
        layar menutupi grid yang justru sedang dilihat.
     3. Menu tarik-turun untuk tier. Jalan, lalu dicabut karena
        isi tas ternyata dibagi dua — Ikan dan Material — dan
        pembagian itu jauh lebih sering dipakai daripada saringan
        tier.

   Sekarang: dua tab yang MENYATU dengan panel slot di bawahnya,
   plus satu tombol urut berlebar tetap di kanan.

   Menempel di bawah header saat grid digulung. top-nya BUKAN 0
   melainkan setinggi header, karena header juga sticky di posisi
   yang sama — kalau keduanya berhenti di 0, baris ini berhenti
   tepat DI BALIK header dan hilang tanpa gejala. Nilainya diukur
   JS (lihat fit() di ui.js): tinggi header berubah mengikuti
   isinya, jadi angka tetap di sini pasti meleset untuk sebagian
   pemain.

   0px, bukan 0: var() cadangan harus punya satuan supaya
   perhitungannya tetap sah kalau JS belum sempat jalan.
   ============================================================ */

.fh-bagbar{
  position:sticky;top:var(--fh-hdr-h,0px);
  z-index:var(--z-subbar);
  flex:none;
  display:flex;align-items:flex-end;gap:var(--sp-sm);
  /* padding-bawah NOL: tab harus menyentuh panel di bawahnya. */
  padding:var(--sp-md) var(--sp-md) 0;
  background:var(--pixel-bg);
}


/* ---------- TAB KATEGORI ---------- */

.fh-bagcat{flex:1;min-width:0;display:flex;gap:4px}

.fh-bagcat__tab{
  position:relative;
  flex:1;min-width:0;height:38px;
  display:flex;align-items:center;justify-content:center;
  padding:0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12px;font-weight:600;
  color:var(--pixel-muted);
  background:var(--pixel-bg);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-md) var(--r-md) 0 0;
  /* Menindih garis atas panel sejauh 1px. Itu yang membuat tab
     aktif terlihat MENYATU dengan panel, bukan berdiri di atasnya:
     tepi bawahnya dan tepi atas panel jadi satu garis yang sama,
     lalu tepi itu dihapus tepat di bawah tab yang aktif. */
  margin-bottom:-1px;
}
/* Laci hampir penuh. Angkanya sudah pindah ke baris kapasitas di
   dalam panel, tapi PERINGATANNYA tetap di tab — justru gunanya
   saat pemain sedang membuka laci yang lain dan tidak melihat
   angkanya sama sekali.

   Titik, bukan angka: yang perlu disampaikan cuma "ada yang perlu
   dilihat di sini", dan satu titik 6px tidak menambah keramaian
   yang barusan dibereskan. */
.fh-bagcat__tab.is-full::after{
  content:"";position:absolute;top:7px;right:7px;
  width:6px;height:6px;border-radius:50%;
  background:var(--down);
}

.fh-bagcat__tab.is-on{
  color:var(--pixel-text);
  background:var(--pixel-surface);
  /* Latar panel dipakai sebagai warna tepi bawah, jadi garisnya
     hilang tanpa perlu menggeser apa pun. */
  border-bottom-color:var(--pixel-surface);
}
.fh-bagcat__tab.is-on em{color:var(--pixel-primary)}

/* Tab yang TIDAK aktif ditekan ke bawah sedikit: laci yang tertutup
   memang duduk lebih rendah daripada yang terbuka. */
.fh-bagcat__tab:not(.is-on){height:34px}
.fh-bagcat__tab:not(.is-on):active{background:var(--pixel-raised)}


/* ---------- TOMBOL URUT ----------
   Bulat dan bersimbol saja. Label teks sempat dipasang lalu
   dibuang: panjangnya berubah-ubah ("Langka" 6 huruf, "Baru" 4),
   dan tombol yang ikut mengembang-menyusut menggeser tab kategori
   di sebelahnya setiap kali urutan diganti — elemen yang bergerak
   padahal bukan itu yang ditekan.

   Ditulis .fh-bagbtn.fh-bagbtn--sort (0,2,0), bukan satu kelas
   saja: tinggi, padding, dan radius di .fh-bagbtn harus ditimpa,
   dan modifier satu kelas cuma seri (0,1,0) — yang menang lalu
   ditentukan urutan baris, dan itu jenis kekalahan yang tidak
   memberi gejala apa pun. Lihat IMPLEMENTASI bagian 6. */

.fh-bagbtn{
  display:flex;align-items:center;gap:var(--sp-sm);
  height:38px;padding:0 var(--sp-md);
  border-radius:var(--r-md);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  color:var(--pixel-text);
}
.fh-bagbtn:active{background:var(--pixel-raised)}

.fh-bagbtn.fh-bagbtn--sort{
  flex:none;
  /* align-self:center + margin bawah: lingkarannya berhenti
     beberapa piksel DI ATAS garis panel, bukan mendarat persis di
     atasnya. Tab memang harus menyentuh panel — dia menyatu; tombol
     ini tidak, dan lingkaran yang menempel ke garis lurus terbaca
     seperti dua benda yang bertabrakan. */
  align-self:center;margin-bottom:4px;
  width:34px;height:34px;padding:0;
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--pixel-muted);
}

.fh-bagbtn__ic{
  width:13px;height:auto;
  fill:currentColor;
  shape-rendering:crispEdges;   /* digambar mengikuti grid pixel */
}

/* Urutan yang sedang dipakai bukan yang bawaan. Tepi emas dipakai
   sebagai PENANDA KEADAAN, bukan ajakan menekan — pola yang sama
   dengan tombol siap-tonton di side rail Home (.fh-rail .is-ready).
   Tanpa ini, tombol tanpa teks tidak punya cara memberi tahu bahwa
   isinya sudah diubah. */
.fh-bagbtn.fh-bagbtn--sort.is-set{
  border-color:var(--pixel-primary);
  color:var(--pixel-primary);
}


/* ---------- PANEL SLOT ----------
   Wadah yang ditempeli tab. Sudut kiri-atas TIDAK dibulatkan:
   di sanalah tab pertama menyatu, dan lengkungan di titik itu
   akan memutus garisnya. */
.fh-bagpanel{
  margin:0 var(--sp-md) var(--sp-lg);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:0 0 var(--r-md) var(--r-md);
}


/* ============================================================
   MENU TARIK-TURUN

   Menempel pada tombolnya sendiri, bukan naik dari dasar layar.
   Mengurut itu tindakan sekilas — panel yang menutupi separuh
   layar untuk tiga pilihan terasa jauh lebih berat daripada
   isinya, dan pemain kehilangan pandangan atas grid yang sedang
   dia urutkan.

   .fh-bagbar yang jadi jangkarnya: dia position:sticky, dan sticky
   sudah termasuk "positioned", jadi anak absolut di dalamnya
   mengukur diri terhadap bar — bukan terhadap halaman. Sekaligus
   berarti menu ikut menempel di bawah header saat digulung, sama
   seperti barnya.
   ============================================================ */

.fh-drop{
  position:absolute;top:calc(100% - 1px);
  display:none;
  max-height:320px;overflow-y:auto;
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:var(--shadow-sheet);
  scrollbar-width:none;
}
.fh-drop::-webkit-scrollbar{width:0}
.fh-drop.is-on{display:block}

/* Rata kanan, mengikuti tombolnya yang juga di kanan. */
.fh-drop--sort{right:var(--sp-md);min-width:150px}

.fh-dropopt{
  display:flex;align-items:center;gap:var(--sp-sm);
  width:100%;text-align:left;
  padding:10px var(--sp-md);
  background:none;
}
.fh-dropopt + .fh-dropopt{border-top:1px solid var(--hairline)}
.fh-dropopt:active{background:var(--pixel-raised)}

/* Yang sedang dipakai. Latar naik satu tingkat — bukan emas: emas
   satu-satunya warna aksi, dan baris yang sudah aktif justru yang
   TIDAK perlu ditekan. */
.fh-dropopt.is-on{background:var(--pixel-raised)}
.fh-dropopt.is-on b{color:var(--pixel-primary)}

.fh-dropopt b{
  flex:1;min-width:0;
  font-size:12px;font-weight:500;color:var(--pixel-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


/* ---------- BARIS ISI LACI ----------
   Angka di kiri, aksi di kanan. Satu baris tipis di puncak panel.

   Perjalanan sampai ke sini, supaya tidak diulang:
     1. Kartu kapasitas setinggi 120px di puncak layar — dicopot,
        membuat puncak sesak.
     2. Angka menempel di nama tab — dicopot, membuat TAB sesak.
     3. Sebaris label + bar + angka — label dan bar dibuang karena
        keduanya mengulang apa yang sudah dikatakan angkanya.
        "115/165" sendirian sudah berarti terpakai-dari-batas, dan
        bar cuma menggambar rasio yang sama sekali lagi.
   ============================================================ */

.fh-bagcap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-md);
  padding:8px var(--sp-md);
  border-bottom:1px solid var(--hairline);
}
.fh-bagcap b{
  font-family:var(--font-pixel);font-size:11px;
  font-variant-numeric:tabular-nums;
}
/* Pembagi diredam: yang dibaca sekilas angka terpakainya, batasnya
   cuma konteks. Satuan material ("keping") diperlakukan sama. */
.fh-bagcap b i{font-style:normal;color:var(--pixel-muted);opacity:.7}

/* Hampir penuh. Merah dipakai dengan alasan yang sama seperti
   kolom "Jadi" yang menurun di tabel banding: pemain berhak tahu
   SEBELUM kerugiannya terjadi — dan di sini kerugiannya adalah
   tangkapan yang hilang karena laci tidak muat lagi. */
.fh-bagcap.is-full b{color:var(--down)}

/* Tombol jual. Emas penuh — ini memang AKSI, bukan penanda
   keadaan, jadi pemakaian emas di sini yang paling lurus dengan
   aturan "satu warna aksi".

   Bayangan padat 2px dan turun saat ditekan, versi kecil dari
   .fh-btn di components.css. */
.fh-bagsell{
  flex:none;height:30px;padding:0 15px;
  border-radius:var(--r-sm);
  background:var(--pixel-primary);color:var(--ink-on-primary);
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.5px;
  box-shadow:0 2px 0 var(--pixel-primary-dim);
}
.fh-bagsell:active{transform:translateY(2px);box-shadow:none}
.fh-bagsell:disabled{
  background:var(--pixel-raised);color:var(--pixel-muted);
  box-shadow:none;transform:none;cursor:not-allowed;
}


/* ---------- SHEET JUAL MASSAL ----------
   Centang per tier. Ambang kumulatif ("di bawah Celestial") sempat
   dipakai dan gugur karena satu hal: dia tidak bisa mengungkapkan
   "jual Secret saja". Semua pilihan yang bisa dibuat ambang tetap
   bisa dibuat centang — tinggal centang beberapa — tapi tidak
   sebaliknya.
   ============================================================ */

.fh-sellnote{
  padding:var(--sp-md) var(--sp-md) 0;
  font-size:11px;line-height:1.45;color:var(--pixel-muted);
}
.fh-sellnote b{color:var(--pixel-text);font-weight:600}

.fh-selllist{padding:var(--sp-sm) var(--sp-md) var(--sp-md)}

/* Warna tier dipasang JS lewat `color` inline: kotak centang,
   tepi baris, dan nama tier ikut sekaligus lewat currentColor. */
.fh-sellrow{
  display:flex;align-items:center;gap:var(--sp-md);
  width:100%;text-align:left;
  padding:10px var(--sp-md);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-md);
  color:var(--pixel-text);
}
.fh-sellrow + .fh-sellrow{margin-top:6px}
.fh-sellrow:active{background:var(--pixel-border)}
.fh-sellrow.is-on{border-color:currentColor}

/* Saklar induk. Jarak lebih lebar di bawahnya supaya dia terbaca
   sebagai pengendali daftar, bukan sebagai anggota daftar. */
.fh-sellrow--all + .fh-sellrow{margin-top:var(--sp-md)}

/* Kotak centang digambar, bukan <input>: input asli di webview
   Telegram tampil dengan gaya sistem yang berbeda-beda antar
   Android dan tidak ikut palet mana pun.

   Centangnya tinggal di elemen SENDIRI, bukan diwarnai lewat
   `color` kotaknya. Kalau kotak yang dibuat transparan, tepinya
   yang memakai currentColor ikut hilang — dan yang tersisa
   sekadar ruang kosong tanpa kotak sama sekali. */
.fh-sellbox{
  flex:none;width:18px;height:18px;
  border-radius:var(--r-xs);
  border:1px solid currentColor;
  display:grid;place-items:center;
}
.fh-sellbox i{
  font-style:normal;font-size:11px;line-height:1;
  color:transparent;
}
.fh-sellrow.is-on .fh-sellbox{background:currentColor}
.fh-sellrow.is-on .fh-sellbox i{color:var(--pixel-sunken)}

.fh-sellrow__main{flex:1;min-width:0}
.fh-sellrow__name{
  display:block;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;
  color:currentColor;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fh-sellrow__meta{
  display:block;margin-top:2px;
  font-size:11px;color:var(--pixel-muted);
}
.fh-sellrow__val{
  flex:none;
  font-family:var(--font-pixel);font-size:9px;
  color:var(--pixel-primary);
}

/* Kaki sheet menjumlahkan yang sedang tercentang. Tanpa itu pemain
   harus menjumlahkan sendiri nilai tiap baris sebelum berani
   menekan — dan itu pekerjaan yang seharusnya dikerjakan layar. */
.fh-sellfoot{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-md);align-items:center;
}
.fh-selltotal span{
  display:block;font-size:9px;color:var(--pixel-muted);
  text-transform:uppercase;letter-spacing:.4px;
}
.fh-selltotal b{
  display:flex;align-items:center;gap:5px;margin-top:4px;
  font-family:var(--font-pixel);font-size:10px;
  color:var(--pixel-primary);
  white-space:nowrap;
}

/* TOMBOLNYA DIKECILKAN, dan angkanya yang mengambil ruang itu.

   Dulu 1fr/1.4fr - tombol memakai 56% kaki untuk mengulang angka
   yang sudah tertulis di sebelahnya. Sekarang 1fr/1fr, dan sisa
   ruangnya jatuh ke TOTAL yang memang bertambah panjang sejak
   coin ditulis penuh.

   1fr/1fr, bukan `auto` yang memeluk isinya: label tombol ini
   berubah mengikuti jumlah centang ("JUAL 3 EKOR" sampai
   "JUAL 115 EKOR", dan "PILIH TIER" saat kosong), jadi lebar yang
   mengikuti isi akan membuat tombol utama melompat-lompat tiap
   satu baris dicentang.

   Muat di layar sempit: font pixel lebarnya tepat 1em per
   karakter, jadi "JUAL 115 EKOR" = 13 x 9px = 117px. Pada 320px
   tiap kolom dapat (296-12)/2 = 142px - masih sisa 25px. */
.fh-sellfoot .fh-btn{height:42px;font-size:9px}


/* ============================================================
   GRID SLOT
   auto-fill, bukan repeat(4,1fr): di 320px empat kolom membuat
   kotak tinggal 68px dan nama ikan tidak lagi terbaca. Dengan
   minmax, layar sempit turun sendiri jadi tiga kolom.
   ============================================================ */

.fh-baggrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  gap:var(--sp-sm);
  /* Panel yang memberi tepi, jadi padding di sini cuma jarak isi
     ke tepi itu. Jarak ke bottom nav diurus margin-bawah panel. */
  padding:var(--sp-md);
}

/* --pixel-raised, BUKAN --pixel-surface: kotaknya sekarang berdiri
   di atas panel yang sudah ber-surface, dan dua bidang berwarna
   sama membuat kotak-kotaknya lenyap jadi satu bidang rata. */
.fh-bagslot{
  text-align:center;
  padding:6px 5px 7px;border-radius:var(--r-md);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  color:var(--pixel-text);
}
.fh-bagslot:active{transform:scale(.97)}

.fh-bagslot small{
  display:block;margin-top:5px;font-size:10px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fh-bagslot em{
  display:block;font-style:normal;
  font-size:9px;color:var(--pixel-muted);
  font-variant-numeric:tabular-nums;
}

/* .fh-cel-grad di components.css memakai --pixel-surface sebagai
   latar padding-box-nya. Di dalam panel, kotak memakai
   --pixel-raised, jadi latar itu harus ikut disamakan — kalau
   tidak, kartu celestial jadi satu-satunya yang berlatar beda. */
.fh-bagslot.fh-cel-grad{
  background:
    linear-gradient(var(--pixel-raised),var(--pixel-raised)) padding-box,
    linear-gradient(135deg,var(--t-celestial),var(--t-celestial-2)) border-box;
}

/* Kotak ikan. Tumpukan kilaunya sama persis dengan .fh-tile di
   Home dan di grid perlengkapan — yang berbeda hanya sumber
   warnanya. Itu yang membuat kotak di layar ini terbaca sebagai
   anggota keluarga yang sama. */
.fh-bagtile{
  position:relative;
  width:100%;aspect-ratio:1;
}

/* GARIS TEPI, BUKAN VIGNETTE.

   ASSET_SPEC bagian 3 menyarankan "bayangan gelap tipis di
   belakang aset" untuk memisahkannya dari kotak berwarna, dan itu
   sempat dipasang di sini sebagai vignette radial. Begitu aset
   sungguhan pertama masuk (arunika.png), sarannya terbukti hanya
   benar untuk aset TERANG.

   Yang diukur pada arunika (warna rata-rata badan ikannya
   bernada mawar sedang-gelap):

     lawan singgahan ungu prisma        1,67 : 1
     setelah vignette hitam 35%         1,29 : 1   <- makin buruk

   Sebabnya sederhana: ikannya bernada sedang-gelap, jadi
   menggelapkan kotak di belakangnya justru MENDEKATKAN keduanya.
   Vignette cuma menolong kalau asetnya terang — dan nada aset
   tidak bisa diketahui dari CSS.

   Garis tepi tidak punya masalah itu. Dia menambah tepi
   berkontras tinggi tepat di batas aset, dan itu bekerja untuk
   aset terang maupun gelap, di atas warna kotak apa pun.

   Biayanya satu lintasan filter per gambar. Sekarang cuma satu
   ikan yang punya ikon; begitu ke-77 punya, ini masuk daftar yang
   perlu diukur bersama HOLO_MAX. */
.fh-bagtile > img,
.fh-bagtile > svg{position:relative;z-index:1}

.fh-bagtile > img{filter:drop-shadow(0 0 2px var(--art-edge))}

/* Penanda jumlah. HANYA untuk material: ikan punya id per ekor
   sehingga tidak pernah ditumpuk, sementara material tidak punya
   sifat per keping sehingga menumpuknya tidak menghilangkan
   informasi apa pun. Notasi ×12 sengaja sama dengan slot umpan
   di Home.

   color ditulis eksplisit: .fh-tile mewariskan --pixel-muted ke
   isinya (dia memang dibuat untuk teks cadangan yang diredam),
   dan jumlah keping bukan metadata redup. */
.fh-bagqty{
  position:absolute;right:0;bottom:0;z-index:2;
  padding:2px 5px 3px;
  border-radius:var(--r-xs) 0 0 0;
  background:rgba(var(--bg-rgb),.82);
  color:var(--pixel-text);
  font-family:var(--font-pixel);font-size:8px;line-height:1;
}

/* Bayangan ikan. BUKAN dekorasi: 6 dari 77 ikan belum punya
   berkas ikon (ASSET_SPEC bagian 5), dan folder assets/fish/
   masih kosong. Tanpa ini kotaknya cuma bidang warna dan pemain
   tidak bisa membedakan satu baris dari yang lain.

   Digambar mengikuti grid pixel dengan shape-rendering:crispEdges,
   pola yang sama dengan mahkota VIP di components.css — tidak
   butuh aset apa pun.

   Warnanya TIDAK diatur di sini: bentuknya dirujuk lewat <use>,
   dan selector dari dokumen tidak menembus isi <use>. Yang
   mewarnai ada sebagai style inline di dalam <symbol> di
   index.html; shape-rendering di bawah ini tetap berlaku karena
   dia properti yang diwarisi. */
.fh-fishghost{
  width:62%;height:auto;
  shape-rendering:crispEdges;
}

/* Sel terakhir: sisa ruang. SATU kotak berisi angka, bukan
   puluhan kotak kosong.

   Kotak kosong satu-per-slot akan berbohong di layar ini: satu
   sel di grid adalah satu JENIS ikan (tumpukan), sementara satu
   slot tas adalah satu EKOR. Menggambar 46 kotak kosong di
   belakang 20 tumpukan membuat dua satuan yang berbeda terlihat
   seperti satuan yang sama. */
.fh-bagfree{
  display:grid;place-items:center;gap:2px;
  padding:6px 5px 7px;border-radius:var(--r-md);
  border:1px dashed var(--pixel-border);
  background:transparent;color:var(--pixel-muted);
}
.fh-bagfree b{font-family:var(--font-pixel);font-size:11px}
.fh-bagfree span{font-size:9px;text-transform:uppercase;letter-spacing:.3px}
.fh-bagfree.is-full{border-color:var(--alert-border);color:var(--alert-text)}

/* Tas kosong. Bukan pesan error — tidak ada yang salah, isinya
   memang belum ada. */
.fh-bagempty{
  padding:var(--sp-lg) var(--sp-md);
  text-align:center;
}
.fh-bagempty b{
  display:block;font-family:var(--font-pixel);font-size:10px;
  margin-bottom:var(--sp-sm);
}
.fh-bagempty p{font-size:12px;color:var(--pixel-muted);line-height:1.5}

.fh-bagmsg{margin:var(--sp-md) var(--sp-md) 0;display:none}
.fh-bagmsg.is-on + .fh-baggrid{padding-top:var(--sp-md)}
.fh-bagmsg.is-on{display:block}



/* ============================================================
   SHEET DETAIL IKAN
   Bottom sheet, bukan overlay: ini BACAAN, bukan mode. Aturan
   yang sama yang menaruh "Rincian perlengkapan" di sheet dan
   "Ganti perlengkapan" di full-screen.

   Ini BUKAN layar "Detail ikan" yang disebut DESIGN_NOTES —
   yang itu milik Bestiary dan punya animasi besar serta data
   koleksi. Yang di sini hanya menjawab satu pertanyaan: tumpukan
   ini isinya apa, dan laku berapa.
   ============================================================ */

/* Pembungkus panggung + nama. Kelasnya sendiri karena dia yang
   memakai .fh-cel-shine — kilau itu mengganti border jadi
   gradient, jadi elemen yang dikenainya harus memang punya
   border 1px dan radius sejak awal. Pola yang sama dengan
   .fh-eqprev di equipment.css. */
.fh-fishprev{
  margin:var(--sp-md) var(--sp-md) 0;
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-lg);
  overflow:hidden;
}

.fh-fishstage{
  position:relative;
  display:grid;place-items:center;
  height:190px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(0,0,0,.28)),
    var(--t,var(--pixel-raised));
}
.fh-fishstage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0 15px,var(--scanline) 15px 30px);
}
.fh-fishstage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  pointer-events:none;
  background:linear-gradient(to top,rgba(var(--bg-rgb),.9),transparent);
}

/* LAPIS MEDIA. Mengisi panggung, bukan kotak 118px di tengahnya —
   karena isinya bisa berupa VIDEO, dan video H.264 tidak punya
   alpha. Video opak yang mengambang sebagai persegi kecil di atas
   warna tier terbaca seperti stiker yang ditempel; yang mengisi
   penuh terbaca sebagai panggungnya sendiri.

   Kelas .fh-holo dan .fh-spark dipasang DI SINI, bukan di
   .fh-fishstage. Panggung sudah memakai ::after untuk gradasi
   gelap di dasarnya, dan .fh-holo::after menyasar pseudo yang
   sama — tas.css dimuat setelah components.css, jadi gradasi itu
   menang dan pita holo tidak pernah tergambar sama sekali. Bug
   diam yang baru ketahuan saat menyiapkan video.

   z-index 0, bukan 1: dengan begitu ::before (garis pindai) dan
   ::after (gradasi dasar) milik panggung tetap tergambar DI ATAS
   media, dan keduanya memang lapisan atmosfer. */
.fh-fishstage__art{
  position:absolute;inset:0;z-index:0;
  display:grid;place-items:center;
  overflow:hidden;
}

/* IKON tetap 118px di tengah — dia punya alpha, jadi warna tier di
   belakangnya justru bagian dari tampilannya.

   `:not(.fh-fishvid)` WAJIB, dan ini bukan kerapian melainkan
   perbaikan bug. Kartu panggung tier bawah digambar sebagai <img>
   berkelas .fh-fishvid (lihat videoIsi di ui.js) supaya mengisi
   penuh seperti video. Tapi `.fh-fishvid` cuma (0,1,0) sedangkan
   `.fh-fishstage__art img` (0,1,1) — selektor elemen menambah
   bobot, jadi aturan 118px ini MENANG dan kartu 704x376 menyusut
   jadi persegi kecil di tengah panggung.

   Pengecualiannya ditaruh di sini, di aturan yang salah menyasar,
   bukan dengan menaikkan bobot .fh-fishvid: yang perlu dibaca orang
   berikutnya adalah "gambar diam 118px KECUALI dia media panggung",
   dan kalimat itu hanya terbaca kalau syaratnya menempel di
   aturannya sendiri.

   Jebakan yang sama pernah menggigit di museum: `.fh-mus__tile > img`
   (0,1,1) mengalahkan `.fh-ikon2` (0,1,0) dan lapis kedua
   transformasi hilang tanpa satu pun error. */
.fh-fishstage__art img:not(.fh-fishvid){width:118px;height:118px;object-fit:contain}
.fh-fishstage__art .fh-fishghost{width:118px}

/* Bayangan keping BUJUR SANGKAR, bayangan ikan memanjang. Ukuran
   yang sama persis membuat keping terlihat jauh lebih besar dari
   ikan di kotak yang sama besarnya, jadi lebarnya ditarik turun
   sampai luas keduanya terbaca setara. */
.fh-matghost{width:50%}
.fh-fishstage__art .fh-matghost{width:96px}

/* Video MENGISI PENUH. object-fit:cover, jadi rasio apa pun tidak
   pernah menyisakan pita hitam di tepi. */
.fh-fishvid{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* KARTU DIAM: contain, bukan cover — dan ini bukan ketidakkonsistenan.

   Panggung ini sengaja 16:9 supaya PAS dengan videonya (lihat
   @supports di bawah): mp4-nya 1280x720 = 1,778:1, jadi cover tidak
   memotong sepiksel pun.

   Kartu tier bawah bukan 16:9. Dia 704x376 (1,872:1) atau 712x376
   (1,894:1) - sekitar 5% lebih lebar. Dengan cover, kelebihan itu
   dibuang di kiri dan kanan, 2,6% tiap sisi.

   contain menukarnya: seluruh kartu terlihat, dengan pita tipis di
   atas dan bawah setinggi ~2,5% panggung (sekitar 5px). Pilihan itu
   disengaja - kartu ini SATU gambar utuh berlatar penuh, dan
   memotong tepinya membuang bagian pemandangan yang digambar
   sengaja. Pita 5px di atas gradasi panggung nyaris tak terlihat;
   tepi yang hilang tidak bisa dikembalikan.

   Video tetap cover karena rasionya memang sudah sama - contain di
   sana tidak akan mengubah apa pun kecuali menambah risiko pita
   kalau suatu saat ada mp4 yang rasionya meleset. */
img.fh-fishvid{object-fit:contain}

/* Sebab kegagalan video. Muncul HANYA di mode contoh, di atas
   gambar diam yang menggantikan videonya - lihat catatan() di
   tas.js. z-index 3 supaya tidak tertutup lapis atmosfer panggung. */
.fh-fishstage__pesan{
  position:absolute;z-index:3;
  left:0;right:0;bottom:var(--sp-sm);
  text-align:center;
  font-family:var(--font-ui);font-size:10px;
  color:var(--pixel-muted);
  text-shadow:0 1px 2px var(--art-edge);
}


/* JUDUL SHEET = identitas ikannya.

   Tengah, dan tombol tutup dipasang absolut di kanan — bukan
   flex space-between. Kalau baris ini flex, judulnya akan
   terdorong ke kiri sebesar lebar tombol dan tidak pernah benar
   benar di tengah panel. */
.fh-fishhd{
  position:relative;
  /* Tinggi baris judul dikunci ANGKA, bukan pengali. Tombol tutup
     dipasang absolut dan harus tahu persis di mana garis tengah
     baris itu; dengan line-height:1.4 nilainya ikut berubah tiap
     kali ukuran font judul disentuh, dan tombolnya diam-diam
     melenceng lagi. */
  --hd-line:18px;
  padding:var(--sp-md) 52px;
}
.fh-fishhd__id{
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
/* Ditulis berpasangan dengan induknya, bukan sebagai satu kelas.
   overlay.css sudah punya `.fh-sheet__hd h3` (0,1,1) yang menetapkan
   10px; kelas tunggal (0,1,0) kalah darinya dan ukurannya diam-diam
   tidak pernah berubah. */
.fh-fishhd .fh-fishhd__name{
  font-family:var(--font-pixel);font-size:12px;font-weight:400;
  letter-spacing:.5px;line-height:var(--hd-line);
}
/* BADGE TIER TERISI pindah ke components.css sebagai .fh-tier--isi.
   Dia sekarang dipakai DUA layar — sheet detail ikan di sini dan
   baris ikan di papan mingguan — dan aturannya satu, bukan dua
   salinan yang bisa berbeda. Riwayat dan alasan angkanya ikut
   pindah ke sana. */

/* TOMBOL TUTUP SEJAJAR JUDUL, bukan sejajar kotak headernya.

   `top:50%` sempat dipakai dan itu benar hanya selama header
   berisi satu baris. Untuk ikan header berisi DUA — nama dan badge
   tier — jadi setengah tinggi kotak jatuh di antara keduanya, dan
   lingkarannya melayang di sela dua baris alih-alih berdampingan
   dengan namanya. Yang dipakai sekarang: setengah tinggi BARIS
   NAMA, dihitung dari tepi atas padding.

   Koreksi 1px ke atas itu optis, bukan aritmetika. Press Start 2P
   menaruh glifnya di bagian atas kotak barisnya dan menyisakan
   ruang kosong di bawah baseline; garis tengah huruf yang TERLIHAT
   karena itu duduk sedikit di atas garis tengah barisnya, dan
   lingkaran yang dipusatkan secara matematis terbaca kerendahan.

   Padding vertikalnya juga naik ke --sp-md: pada 8px, lingkaran
   30px menyisakan 1,5px ke tepi kotak, jadi dia terbaca memenuhi
   header alih-alih duduk di dalamnya - dan itu ikut membuatnya
   terlihat tidak seimbang, terlepas dari titik pusatnya. */
.fh-fishhd__x{
  position:absolute;right:var(--sp-md);
  top:calc(var(--sp-md) + var(--hd-line) / 2 - 1px);
  transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  color:var(--pixel-muted);
}
/* 9px untuk viewBox 9 satuan: SATU satuan = SATU piksel CSS, jadi
   tiap goresan tetap sama tebal di DPR 1, 2, dan 3. Sebelumnya
   11px — 1,222 piksel per satuan — dan crispEdges membulatkan tiap
   tepi ke piksel perangkat terdekat, jadi sebagian goresan silang
   itu jatuh setebal 2 dan sebagian 3. Silang yang goresannya tidak
   sama tebal terbaca miring, dan itu terlihat justru karena
   bentuknya simetris. */
.fh-fishhd__x svg{
  width:9px;height:9px;fill:currentColor;shape-rendering:crispEdges;
}
.fh-fishhd__x:active{transform:translateY(-50%) scale(.92)}

.fh-fishrows{padding:var(--sp-sm) var(--sp-md) var(--sp-md)}
.fh-fishrows > div{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-sm);padding:8px 0;
}
/* Pemisah lebih redup dari tepi panel: di dalam satu kartu,
   garis sekuat tepi kartu membuat daftar terbaca sebagai
   kumpulan kotak. Alasan yang sama dengan .fh-cmp__row. */
.fh-fishrows > div + div{border-top:1px solid var(--hairline)}
.fh-fishrows span{font-size:12px;color:var(--pixel-muted)}
.fh-fishrows b{
  font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.fh-fishrows b.is-coin{color:var(--pixel-primary)}

/* BARIS BERTUMPUK — dipakai dua baris terakhir material, dan
   baris "Tersedia" di sheet Bestiary.

   Kiri-kanan benar untuk satu angka dan salah untuk daftar: pada
   390px kolom kanan tinggal ~200px, sementara "Boost pribadi +25%
   (2 keping)" sendirian sudah lebih panjang dari itu. Ditumpuk,
   isinya boleh sepanjang apa pun tanpa memaksa labelnya menyusut.

   `display:block` menimpa flex di atasnya; baseline dan gap ikut
   mati bersamanya, jadi jarak label ke daftar diatur ulang di sini. */
.fh-fishrows > div.is-stack{display:block}
.fh-fishrows > div.is-stack > span{display:block;margin-bottom:6px}

/* Tiap butir jadi KEPINGAN sendiri, bukan satu kalimat berkoma.
   Batas antar-butir terbaca dari bidangnya, jadi mata tidak perlu
   mencari koma untuk tahu ini tiga hal — dan butir yang panjang
   membungkus ke baris berikutnya sebagai satu blok utuh, tidak
   pernah patah di tengah kata. */
.fh-chips{display:flex;flex-wrap:wrap;gap:6px}
.fh-chips i{
  font-style:normal;font-size:11px;line-height:1.25;
  padding:5px 8px;border-radius:var(--r-sm);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  color:var(--pixel-text);
}

/* KAKI: tiga aksi sama lebar — Favorit, Jual, Museum.

   Tutup tidak ada di sini. Dia naik jadi ikon di judul, karena dia
   satu-satunya yang TIDAK mengubah apa pun; menaruhnya sebaris
   dengan tiga tombol yang semuanya mengubah keadaan ikan membuat
   baris ini terbaca seperti empat pilihan setara. */
.fh-fishfoot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-sm)}

/* Ikon DI ATAS teks, bukan di sampingnya. Pada 390px tiap tombol
   dapat ~114px, sementara "MENJUAL…" di font pixel 9px sudah 72px
   sebelum dihitung ikon, jarak, dan padding — berdampingan pasti
   terpotong justru saat tombolnya sedang bekerja. */
.fh-fishact{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  min-height:56px;padding:var(--sp-sm) 4px;
  border-radius:var(--r-md);
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  color:var(--pixel-muted);
}
.fh-fishact__ic{
  width:17px;height:auto;
  fill:currentColor;
  shape-rendering:crispEdges;   /* digambar mengikuti grid pixel */
}
.fh-fishact__tx{
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.3px;
  line-height:1;white-space:nowrap;
}
.fh-fishact:active{transform:scale(.97)}
.fh-fishact:disabled{opacity:.45}

/* HANYA JUAL yang primer. Tiga tombol yang menonjol sama kuat
   berarti tidak ada yang menonjol, dan dari ketiganya cuma ini
   yang tidak bisa dibatalkan. */
.fh-fishact--primary{
  background:var(--pixel-primary);
  border-color:var(--pixel-primary);
  color:var(--ink-on-primary);
}

/* "Sudah favorit" ditandai lewat WARNA ISI, bukan latar penuh.
   Latar emas penuh akan menyamakannya dengan JUAL, padahal yang
   satu keadaan dan yang satu tindakan. */
.fh-fishact.is-on{
  color:var(--pixel-primary);
  border-color:var(--pixel-primary);
}


/* ============================================================
   DIALOG KONFIRMASI
   Menjual tidak bisa dibatalkan, jadi dia lewat dialog tengah —
   satu-satunya pola yang memang dibuat untuk "sulit ditutup
   tanpa sengaja" (klik backdrop TIDAK menutupnya, lihat ui.js).
   ============================================================ */

/* text-align dikembalikan ke kiri: .fh-dialog__body menengahkan
   isinya, dan paragraf peringatan dua baris yang ditengahkan
   membaca sebagai hiasan, bukan sebagai hal yang harus dibaca. */
.fh-bagwarn{
  display:none;margin-top:var(--sp-md);text-align:left;
  padding:var(--sp-sm) var(--sp-md);
  border-radius:var(--r-sm);
  background:var(--alert-bg);
  border:1px solid var(--alert-border);
  font-size:11px;line-height:1.4;color:var(--alert-text);
}
.fh-bagwarn.is-on{display:block}


/* ============================================================
   MODE NATIVE — panggung ikan menyesuaikan tinggi layar.
   body:not(.fh-scaled), karena di mode terskala media query dan
   vh mengukur jendela asli, bukan stage.
   ============================================================ */

body:not(.fh-scaled) .fh-fishstage{height:clamp(150px,25vh,210px)}

/* Sumber videonya 16:9. Begitu namanya keluar dari panggung, kartu
   ini tidak lagi berbagi ruang dengan apa pun, jadi rasionya bisa
   disamakan dengan videonya sendiri — object-fit:cover lalu tidak
   memotong apa-apa.

   Di dalam @supports, karena tanpa aspect-ratio tinggi tetapnya di
   atas yang berlaku dan itu memang cadangan yang benar. */
@supports (aspect-ratio:16/9){
  .fh-fishstage,
  body:not(.fh-scaled) .fh-fishstage{height:auto;aspect-ratio:16/9}
}