/* ============================================================
   museum.css — halaman kedua dek di Home.
   Butuh: tokens.css, base.css, components.css, home.css, tas.css

   Museum = 25 slot PAJANGAN PERMANEN (audit bagian 4). Yang masuk
   ke sini tidak bisa dijual maupun di-extract lagi, dan itu yang
   memisahkannya dari Favorit: favorit menyimpan, museum memamerkan.

   Yang tidak ada di sini: panggung tunggal berisi satu ikan
   pilihan.

   ⚠ Versi sebelumnya memang punya panggung besar berisi satu ikan
   pilihan plus baris enam sel di bawahnya, dan itu dicabut utuh.
   Sebabnya satu kalimat: museum 25 slot yang menampilkan satu
   isinya sekaligus adalah museum yang menyembunyikan 24 sisanya.
   Yang dicari pemain di halaman ini KOLEKSINYA — seberapa jauh
   terkumpul, dan apa saja yang sudah masuk — sementara "satu ekor
   yang menonjol" sudah punya tempatnya sendiri di panggung karakter
   halaman sebelah. Jangan kembalikan panggungnya tanpa menjawab itu
   lebih dulu.

   BINGKAINYA memakai .fh-chr milik halaman karakter (garis tepi dan
   siku sudut), karena dua panel yang bergantian menempati satu
   tempat harus punya bingkai yang sama. Yang di dalamnya berbeda,
   dan memang harus berbeda.

   SELURUH HALAMAN ADALAH RAKNYA — 25 kotak, tiga per baris, dan
   raknya menggulung di dalam panelnya sendiri.

   Popup detailnya memakai chrome bersama .fh-fishhd / .fh-fishprev
   / .fh-fishstage / .fh-fishrows yang definisinya tinggal di
   tas.css — satu komponen yang sama di empat layar, bukan salinan.
   Yang berbeda cuma WADAHNYA: di sini kartu di tengah layar, bukan
   sheet dari bawah. Alasannya di markupnya.
   ============================================================ */


/* ============================================================
   KEPALA
   ============================================================ */

.fh-mus__hd{
  flex:none;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:10px var(--sp-md);
  border-bottom:1px solid var(--pixel-border);
}
.fh-mus__ttl{
  font-family:var(--font-pixel);font-size:8px;letter-spacing:1.2px;
  color:var(--pixel-muted);
}

/* Terpakai emas, batasnya redup. Yang dikejar pemain angka
   pertama; angka kedua cuma satuan yang membuatnya berarti, dan
   dua angka sama terang membuat keduanya harus dibaca dua kali. */
.fh-mus__cap{font-family:var(--font-pixel);font-size:9px;color:var(--pixel-primary)}
.fh-mus__cap i{font-style:normal;color:var(--pixel-muted);font-size:8px}

/* ============================================================
   MODE ATUR
   Kotak diketuk untuk memilih, lalu diketuk lagi untuk menaruh.
   TIDAK ADA seret, TIDAK ADA tekan-tahan - dan karena itu tidak
   ada gerakan yang berebut permukaan dengan gulung tegak maupun
   geser antar-halaman. Ketukan dan geseran dibedakan browser
   sendiri: yang satu diam, yang lain bergerak.
   ============================================================ */

.fh-mus__kanan{display:flex;align-items:center;gap:10px}

.fh-mus__atur{
  font-family:var(--font-pixel);font-size:7px;letter-spacing:.8px;
  padding:5px 8px;border-radius:var(--r-sm);
  color:var(--pixel-muted);
  border:1px solid var(--pixel-border);
  background:var(--pixel-raised);
  cursor:pointer;
}
.fh-mus__atur[aria-pressed="true"]{
  color:var(--pixel-bg);
  background:var(--pixel-primary);
  border-color:var(--pixel-primary);
}

/* GOYANGAN. Penanda mode yang tidak butuh teks dan terbaca sekilas
   - pola yang sudah dikenal orang dari layar utama ponsel.

   Sudutnya kecil (1.1deg): kotak 112px yang bergoyang lebih dari
   itu mulai terlihat seperti sedang rusak, bukan sedang bisa
   dipindah.

   Fase diundur per kolom lewat :nth-child supaya ke-25 kotak tidak
   bergoyang serempak seperti satu papan - yang justru terbaca
   sebagai halaman bergetar, bukan sebagai kotak yang bisa
   diangkat. */
@keyframes fh-mus-goyang{
  0%,100%{transform:rotate(-1.1deg)}
  50%    {transform:rotate(1.1deg)}
}
.fh-mus__grid.is-atur button.fh-mus__slot .fh-mus__tile{
  animation:fh-mus-goyang .42s ease-in-out infinite;
}
.fh-mus__grid.is-atur button.fh-mus__slot:nth-child(3n+2) .fh-mus__tile{
  animation-delay:-.14s;
}
.fh-mus__grid.is-atur button.fh-mus__slot:nth-child(3n+3) .fh-mus__tile{
  animation-delay:-.28s;
}

/* SABUK PENGAMAN. home.js memanggil FHMuseum.tutup() saat halaman
   museum ditinggalkan, dan itu jalur utamanya. Aturan ini menutup
   jalur yang mungkin terlewat nanti - halaman dek yang tersembunyi
   cuma diberi pointer-events:none, bukan display:none, jadi apa pun
   yang tertinggal menyala di situ tetap dianimasikan compositor
   tanpa ada yang melihatnya.

   Menyebut .fh-deck__page dari berkas ini memang melintasi batas
   (dek milik home.css). Ditulis di sini, bukan di sana, karena yang
   dijaga goyangan MILIK museum - kalau blok ini dihapus, aturannya
   ikut hilang bersamanya alih-alih tertinggal sebagai selektor
   yatim di berkas lain. */
.fh-deck__page[aria-hidden="true"] .fh-mus__grid.is-atur .fh-mus__tile{
  animation:none;
}

/* Berhenti bergoyang di perangkat yang memintanya. Goyangan ini
   penanda, dan penandanya masih tersampaikan lewat garis pilih
   serta keadaan tombol. */
@media (prefers-reduced-motion:reduce){
  .fh-mus__grid.is-atur button.fh-mus__slot .fh-mus__tile{animation:none}
}

/* YANG SEDANG DIPILIH. Berhenti bergoyang - benda yang sudah
   diangkat tidak ikut bergetar bersama yang masih di rak, dan
   diamnya itu sendiri yang menandai "ini yang sedang saya pegang".

   z-index perlu karena garisnya keluar dari kotak, dan tanpa itu
   kotak sebelahnya menimpanya. */
.fh-mus__grid.is-atur button.fh-mus__slot.is-pilih .fh-mus__tile{
  animation:none;
  transform:scale(1.06);
  outline:2px solid var(--pixel-primary);
  outline-offset:2px;
  z-index:2;
}

/* Slot kosong ikut meredup: di mode atur dia bukan tujuan yang sah
   (yang terjadi MENUKAR dua isi, bukan memindah ke ruang kosong),
   jadi tampilannya harus mengatakan itu sebelum diketuk. */
.fh-mus__grid.is-atur .fh-mus__slot--kosong{opacity:.4}

/* Keterangan museum kosong. :empty menghilangkannya UTUH — padding
   dan border sebuah elemen kosong tetap memakan ruang, dan sebaris
   kosong di bawah kepala terbaca sebagai jarak yang salah, bukan
   sebagai ketiadaan. */
.fh-mus__note{
  flex:none;margin:0;
  padding:10px var(--sp-md);
  font-size:11px;line-height:1.5;color:var(--pixel-muted);
  border-bottom:1px solid var(--hairline);
}
.fh-mus__note:empty{display:none}
.fh-mus__note b{color:var(--pixel-text);font-weight:600}


/* ============================================================
   RAK — 25 kotak, TIGA per baris, menggulung

   TIGA KOLOM, bukan lima. Di lebar isi ~386px itu memberi ~128px
   per kotak (dari ~76px), jadi ikannya benar-benar terlihat —
   dan itu memang gunanya museum. Konsekuensinya raknya jadi
   sembilan baris dan tidak muat dalam satu layar, jadi dia
   MENGGULUNG di dalam panelnya sendiri.

   Menggulung di dalam panel, BUKAN memanjangkan halaman: tinggi
   dek dikunci halaman karakter di sebelahnya (lihat kepala blok DEK
   di home.css), dan halaman yang memaksa tinggi lebih besar akan
   menyisakan ruang kosong di bawah panggung karakter. flex:1 plus
   min-height:0 yang membuatnya patuh — tanpa min-height:0, elemen
   flex menolak menyusut di bawah tinggi isinya dan gulungannya
   tidak pernah muncul.

   BARIS TERAKHIR CUMA BERISI SATU KOTAK (25 = 8x3 + 1), dan itu
   yang membuat garis pemisah 1px dicabut. Dulu jarak antar-kotak
   diisi warna border sehingga terbaca sebagai kisi; dengan baris
   ganjil, dua petak kosong di baris terakhir ikut tergambar sebagai
   bidang border yang menggantung. Sekarang jaraknya sewarna panel
   dan yang memberi bentuk kotaknya sendiri — di 112px, ubin
   berbingkai bulat memang tidak butuh dibantu garis.

   TANPA NAMA di bawah kotak, dan alasannya sudah berganti. Dulu
   soal lebar: lima kolom cuma menyisakan tujuh huruf plus elipsis.
   Di tiga kolom nama LENGKAP sebenarnya muat — yang menahannya
   sekarang keputusan lain: nama di tiap kotak mengubah dinding
   pajangan jadi daftar, sementara nama, tier, dan beratnya sudah
   lengkap sekali tap jauhnya di popup detail. Kalau nanti diputus
   sebaliknya, tempatnya <small> di dalam .fh-mus__slot dan tidak
   ada lagi yang menghalangi.
   ============================================================ */

/* PEMBUNGKUS RAK — dia yang menjaga tinggi dek.

   ⚠ INI BUKAN <div> berlebih. Tanpa dia, rak sembilan baris
   MENENTUKAN tinggi dek: pembungkus halaman tidak punya tinggi
   pasti, jadi `flex:1` pada raknya berbasis persen yang tidak bisa
   diselesaikan, dan browser jatuh ke ukuran ISI — panel museum
   membengkak jadi 1176px, mendorong titik halaman dan tombol CTA
   keluar layar, sementara halaman karakter di sebelahnya ikut
   melar mengekor.

   Yang memutus lingkaran itu: raknya dikeluarkan dari alur
   (position:absolute di dalam pembungkus ini). Pembungkus yang
   isinya cuma anak out-of-flow bertinggi-isi NOL, jadi dia tidak
   pernah punya suara saat dek mengukur halaman mana yang tertinggi
   — lalu flex:1 memberinya sisa ruang setelah kepala, dan raknya
   mengisi ruang itu dan menggulung di dalamnya. */
.fh-mus__rakwrap{
  flex:1;min-height:0;
  position:relative;
}

.fh-mus__grid{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  /* auto, bukan 1fr: tinggi baris harus mengikuti ubinnya (yang
     bujur sangkar), bukan dibagi rata dari tinggi panel. Dengan
     1fr, sembilan baris akan dipipihkan sampai ubinnya tidak lagi
     bujur sangkar — dan itu justru menghapus alasan pindah ke tiga
     kolom. */
  grid-auto-rows:auto;
  gap:1px;background:var(--pixel-surface);

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;

  /* RAK INI PENGGULUNG TERSENDIRI, dan itu yang mematahkan geseran
     antar-halaman.

     .fh-deck sudah memasang touch-action:pan-y, tapi sentuhan yang
     mendarat DI DALAM penggulung bersarang diputuskan oleh
     penggulung itu sendiri. Dengan nilai bawaan (auto) rak ini
     mengaku sanggup menangani segala arah, browser memberikan
     sentuhannya kepada dia, dan geseran mendatar tidak pernah
     sampai ke dek — bukan tertunda, hilang sama sekali.

     Dinyatakan ulang di sini, bukan diwarisi: touch-action TIDAK
     diwarisi, dan ancestor yang sudah benar tidak menolong
     penggulung yang diam. */
  touch-action:pan-y;
}
.fh-mus__grid::-webkit-scrollbar{width:0}

.fh-mus__slot{
  background:var(--pixel-surface);
  display:grid;place-items:center;
  padding:8px;
  position:relative;
}

/* Hanya slot BERISI yang bisa ditekan; yang kosong bukan tombol
   sama sekali (lihat catatan di markup). */
button.fh-mus__slot{cursor:pointer}
button.fh-mus__slot:active{transform:scale(.94)}

/* Dijepit 112px supaya di layar lebar ubinnya tidak ikut membesar
   tanpa batas — aset ikannya sendiri 256px, dan di atas ~130px
   tepinya mulai terbaca lembek. */
.fh-mus__tile{
  position:relative;
  width:100%;max-width:112px;aspect-ratio:1;
  border-radius:10px;
}
.fh-mus__tile > img,
.fh-mus__tile > svg{position:relative;z-index:1}
.fh-mus__tile > img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 3px var(--art-edge));
}

/* TITIK KILIP IKUT MEMBESAR bersama ubinnya. Jari-jarinya panjang
   mutlak (lihat blok "UKURAN TITIK IKUT WADAHNYA" di
   components.css), jadi ubin yang naik dari 54px ke 112px membuat
   titik yang sama menyusut dari 11% jadi 5% lebar ubin — persis
   masalah yang sudah pernah muncul di panggung popup. Naiknya
   sengaja tidak sebanding: 8% sudah terbaca sebagai kilau tanpa
   jadi bulatan. */
.fh-mus__tile .fh-spark{
  --r-s:3px;
  --r-m:3.5px;
  --r-l:4.5px;
}

/* SLOT KOSONG = CERUK, bukan tombol tambah.

   Ceruk yang dicekungkan ke dalam, tanpa tanda tambah dan tanpa
   garis putus-putus: keduanya mengundang ditekan, dan memasukkan
   ikan ke museum TIDAK dilakukan dari sini — pintunya di sheet
   detail Tas, tempat ikannya dipegang. Slot kosong di halaman ini
   cuma mengatakan berapa banyak yang masih bisa diisi. */
.fh-mus__slot--kosong .fh-mus__tile{
  background:rgba(var(--bg-rgb),.55);
  box-shadow:inset 0 2px 4px rgba(3,10,17,.55),
             inset 0 0 0 1px var(--hairline);
}

/* Sedang memuat: rangka raknya sudah berdiri, isinya belum datang.
   Kotak besar yang diam tanpa keterangan terbaca sebagai rusak;
   rangka yang berdenyut pelan terbaca sebagai sedang menunggu. */
.fh-mus.is-load .fh-mus__grid{animation:fh-mus-tunggu 1.4s ease-in-out infinite}
@keyframes fh-mus-tunggu{
  0%,100%{opacity:1}
  50%    {opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .fh-mus.is-load .fh-mus__grid{animation:none;opacity:.7}
}


/* ============================================================
   MENYIMPAN SUSUNAN

   Yang tersisa dari sistem seret lama cuma dua aturan di bawah.
   Ubin melayang, kotak asal yang dikosongkan, dan cincin sasaran
   dihapus bersama sistemnya - penggantinya memakai ketuk-pilih
   (lihat MODE ATUR di atas), dan di sana tidak ada benda yang
   melayang di bawah jari.
   ============================================================ */

/* Di mode atur, kotak TIDAK membalas sentuhan dengan efek tekan.
   Ubinnya sudah bergoyang dan yang terpilih sudah bergaris emas;
   pantulan tekan di atas keduanya membuat kisi terbaca gelisah,
   bukan responsif. */
.fh-mus__grid.is-atur button.fh-mus__slot:active{transform:none}

/* Sedang menyimpan ke server. Raknya diredupkan dan DIMATIKAN,
   bukan dibiarkan bisa diketuk lagi: susunan museum permanen, dan
   dua permintaan tukar yang saling menyusul bisa menghasilkan
   susunan yang tidak pernah diminta siapa pun. */
.fh-mus__grid.is-simpan{opacity:.55;pointer-events:none}


/* ============================================================
   POPUP DETAIL — kartu di tengah layar

   Alasan memilih tengah dan bukan sheet bawah ditulis lengkap di
   markupnya (index.html). Yang perlu diketahui di sini: chrome-nya
   milik bersama dengan tiga layar lain dan tinggal di tas.css —
   yang ditulis di bawah cuma WADAHNYA.
   ============================================================ */

/* Sedikit lebih lebar dari dialog konfirmasi (344px): isinya
   panggung gambar, bukan dua kalimat, dan panggung yang sempit
   menyia-nyiakan satu-satunya hal yang dipamerkan popup ini. */
.fh-musdlg{max-width:360px;max-height:86vh}

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

/* vh mengukur JENDELA ASLI, bukan stage. Di mode terskala tinggi
   maksimumnya harus persen terhadap stage — aturan yang sama
   dengan .fh-sheet di overlay.css. */
body.fh-scaled .fh-musdlg{max-height:86%}


/* ============================================================
   KAKI POPUP MUSEUM - tombol KELUARKAN

   SAUDARA dari __body, bukan anaknya. Di dalam badan dia ikut
   menggulung: tombolnya hanyut ke atas bersama isi dan garis
   pemisahnya berhenti di tengah area gulir. Pola dan alasannya
   sama dengan .fh-sheet__ft di overlay.css.

   flex:none karena .fh-dialog kolom flex dan __body memakai
   flex:1 1 auto - tanpa ini kaki ikut diperebutkan ruang saat
   isinya panjang.

   Garis pemisah di atas, bukan latar berbeda: tombolnya satu dan
   dia tindakan sekunder. Panggung ikannya yang jadi isi utama
   popup ini, dan blok berwarna di kaki akan menariknya turun.

   TANPA env(safe-area-inset-bottom), beda dari .fh-sheet__ft:
   sheet menempel ke dasar layar dan harus menghindari bilah
   beranda, sementara dialog ini melayang di tengah.
   ============================================================ */

.fh-musdlg__foot{
  flex:none;
  padding:var(--sp-md);
  border-top:1px solid var(--pixel-border);
}

/* Selebar popup: tombol tunggal yang menyempit di tengah terbaca
   seperti menunggu tombol kedua di sebelahnya. */
.fh-musdlg__foot .fh-btn{width:100%}