/* ============================================================
   equipment.css — overlay ganti perlengkapan.
   Butuh: tokens.css, base.css, components.css, overlay.css

   Catatan struktur: HANDOFF bagian 2 mendaftar js/equipment.js
   tapi tidak mendaftar css-nya. Aturan umum overlay tetap di
   overlay.css; yang khusus layar ini tinggal di sini supaya
   berkas bersama tidak menggembung. Kalau rincian stat nanti
   pindah ke layar Tas seperti disebut DESIGN_NOTES, berkas ini
   yang ikut pindah.

   Yang perlu diingat soal layar ini: dia BUKAN galeri, tapi ALAT
   BANDING. Hanya satu item aktif per slot, dan bedanya halus —
   Draco vs Sultan cuma beda 5% rare, 1% double, 15 slot. Tanpa
   perbandingan pemain tidak punya dasar memilih. Itu sebabnya
   tabel Kini/Jadi dapat tempat lebih besar daripada gridnya.
   ============================================================ */


/* ============================================================
   TAB SLOT
   ============================================================ */

.fh-eqtabs{
  flex:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--pixel-border);
  border-bottom:1px solid var(--pixel-border);
}
.fh-eqtabs button{
  background:var(--pixel-bg);color:var(--pixel-muted);
  padding:11px 2px;font-size:11px;font-weight:500;position:relative;
}
.fh-eqtabs button.is-on{color:var(--pixel-primary);background:var(--pixel-surface)}
.fh-eqtabs button.is-on::after{
  content:'';position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:24px;height:2px;background:var(--pixel-primary);
}


/* ============================================================
   PRATINJAU
   ============================================================ */

.fh-eqprev{
  margin:var(--sp-md);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-lg);
  overflow:hidden;
}

.fh-eqstage{
  position:relative;
  display:grid;place-items:center;
  height:230px;
  border-bottom:1px solid var(--pixel-border);
  /* --t diisi JS: warna level untuk gear, warna tier untuk karakter.
     Kilau dan bayangnya sama dengan .fh-tile supaya kotak besar di
     sini terbaca sebagai versi besar kotak kecil di Home.

     Untuk KARAKTER --t sengaja tidak dipasang sama sekali, jadi
     yang tampil --pixel-raised dan pendar tier di lapisan atasnya.
     Lihat renderPreview() di equipment.js. */
  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));
}

/* Untuk KARAKTER panggungnya gelap dengan pendar warna tier, sama
   persis dengan panggung di Home — dua layar yang menggambar hal
   yang sama harus terbaca sama. Untuk gear lapisan ini dimatikan
   dan yang tampil kotak terisi penuh warna level di atas. */
.fh-eqstage__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;
}
.fh-eqstage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0 15px,var(--scanline) 15px 30px);
}
.fh-eqstage::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);
}

/* Sprite karakter: kanvas persegi, contain. Sama seperti Home. */
.fh-eqsprite{
  position:relative;z-index:1;
  height:clamp(150px,42vw,200px);
  aspect-ratio:1;width:auto;object-fit:contain;
}
/* Ikon gear: SEBESAR sprite karakter, bukan 132px mengambang di
   tengah panggung 230px.

   Dulu dia dipatok --gear-ico-lg dan hasilnya cuma mengisi ~53%
   tinggi panggung — kotaknya besar, ilustrasinya kecil di tengah,
   dan ruang kosong di sekelilingnya tidak menyampaikan apa pun.
   Karakter dan gear digambar di panggung yang SAMA di layar ini,
   jadi keduanya memakai tangga ukuran yang sama; yang membedakan
   cuma latarnya (lihat .fh-eqstage__bg).

   Angkanya tetap lewat --gear-ico-lg supaya batas atasnya tertulis
   di tokens.css bersama budget asetnya: 200px x 2 = 400px, dan aset
   gear 384px menutupinya dalam selisih 4%. Membesarkannya lagi
   berarti mengkonversi ulang ke-25 aset — sumbernya 512px, jadi
   bisa, tapi jangan diam-diam. */
.fh-eqsprite--gear{
  height:clamp(150px,42vw,var(--gear-ico-lg));
  width:auto;aspect-ratio:1;
}

.fh-eqprev__tier{
  position:absolute;top:var(--sp-sm);left:var(--sp-sm);z-index:2;
}
/* Penanda "sedang dipakai". Ditaruh berseberangan dengan tier
   supaya keduanya tidak pernah bertumpuk di kanvas sempit. */
.fh-eqprev__now{
  position:absolute;top:var(--sp-sm);right:var(--sp-sm);z-index:2;
  font-size:10px;font-weight:600;
  background:var(--pixel-primary);color:var(--ink-on-primary);
  padding:3px 7px;border-radius:var(--r-xs);
}
.fh-eqprev__name{
  position:absolute;left:0;right:0;bottom:var(--sp-md);z-index:2;
  text-align:center;
  font-family:var(--font-pixel);font-size:13px;
}


/* ============================================================
   TABEL BANDING — inti layar ini

   Dua kolom: apa yang dipakai sekarang, dan apa yang akan
   berlaku. PENURUNAN DITAMPILKAN MERAH, bukan hanya kenaikan:
   slot inventory turun 15 bisa membuat sesi mancing berhenti
   lebih cepat, dan pemain berhak tahu sebelum menekan tombol.
   ============================================================ */

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

.fh-cmp__hd,
.fh-cmp__row{display:grid;grid-template-columns:1fr 52px 52px;gap:var(--sp-sm)}

.fh-cmp__hd{padding-bottom:6px;border-bottom:1px solid var(--pixel-border)}
.fh-cmp__hd span{
  font-size:9px;color:var(--pixel-muted);
  text-transform:uppercase;letter-spacing:.4px;text-align:right;
}
.fh-cmp__hd span:first-child{text-align:left}

.fh-cmp__row{padding:7px 0;align-items:baseline}
/* Pemisah antar baris lebih redup dari border panel: di dalam
   satu kartu, garis sekuat tepi kartu membuat tabel terbaca
   sebagai kumpulan kotak, bukan satu daftar. */
.fh-cmp__row + .fh-cmp__row{border-top:1px solid var(--hairline)}

.fh-cmp__row em{font-style:normal;font-size:12px;color:var(--pixel-muted)}
.fh-cmp__row b,
.fh-cmp__row i{
  text-align:right;font-size:12px;font-style:normal;
  font-variant-numeric:tabular-nums;   /* angka tidak bergeser saat berubah */
}
.fh-cmp__row b{color:var(--pixel-muted);font-weight:400}  /* kolom "Kini" mundur */
.fh-cmp__row i{font-weight:600}                            /* kolom "Jadi" maju  */

.fh-cmp__row i.is-up{color:var(--up)}
.fh-cmp__row i.is-down{color:var(--down)}
.fh-cmp__row i.is-same{color:var(--pixel-muted);font-weight:400}


/* ============================================================
   PESAN
   ============================================================ */

.fh-eqmsg{margin:0 var(--sp-md) var(--sp-md);display:none}
.fh-eqmsg.is-on{display:block}


/* ============================================================
   GRID PILIHAN
   Item terkunci TETAP DITAMPILKAN lengkap dengan syaratnya.
   Itu yang mengubah daftar ini dari inventaris jadi peta tujuan,
   dan membuat Sultan (VIP lv5) jadi titik monetisasi yang wajar.
   ============================================================ */

.fh-eqgrid-sec{padding:var(--sp-lg) var(--sp-md) var(--sp-md)}
.fh-eqgrid-sec h2{
  font-family:var(--font-pixel);font-size:9px;font-weight:400;
  color:var(--pixel-muted);text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:var(--sp-sm);
}

.fh-eqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-sm)}

.fh-eqcard{
  position:relative;text-align:center;
  padding:6px;border-radius:var(--r-md);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
}
/* Border menebal 1px saat terpilih, jadi padding dikurangi 1px
   supaya kartunya tidak ikut membesar dan grid tidak bergeser. */
.fh-eqcard.is-sel{border-color:var(--pixel-primary);border-width:2px;padding:5px}

.fh-eqcard__thumb{
  width:100%;aspect-ratio:1;margin-bottom:5px;
  border-radius:var(--r-sm);
  font-size:7px;
}
.fh-eqcard small{
  display:block;font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Centang: yang sedang dipakai, bukan yang sedang dipilih.

   z-index WAJIB, dan alasannya tidak kelihatan dari berkas ini.
   Centang ditulis SEBELUM kotak asetnya di renderGrid(), dan itu
   aman selama asetnya elemen biasa — elemen absolut selalu digambar
   di atas elemen dalam alur. Sejak .fh-tile__img memakai
   filter:drop-shadow, img itu membentuk stacking context sendiri dan
   ikut digambar di lapisan yang sama dengan elemen absolut z-index
   auto; yang menang lalu urutan DOM, dan urutan DOM memihak asetnya.
   Akibatnya centang Umpan Celestial hilang di balik sulur birunya.

   Cincinnya menyelesaikan sisa persoalan yang sama: kotak aset
   terisi warna rarity penuh dan ilustrasinya ramai sampai ke pojok,
   jadi lingkaran kuning polos pun bisa lebur ke dalamnya. Dengan
   cincin sewarna kartu, centangnya terbaca sebagai keping yang
   duduk DI ATAS kotak, bukan bagian dari gambarnya. */
.fh-eqcard__now{
  position:absolute;top:4px;right:4px;z-index:2;
  width:16px;height:16px;border-radius:50%;
  background:var(--pixel-primary);color:var(--ink-on-primary);
  box-shadow:0 0 0 2px var(--pixel-surface);
  font-size:10px;font-weight:700;line-height:1;
  display:grid;place-items:center;
}

/* LEVEL ENHANCE, berseberangan dengan centang.

   top:4px sama persis dengan .fh-eqcard__now supaya keduanya duduk
   di satu garis — itu yang membuat pojok kartu terbaca sebagai satu
   baris penanda, bukan dua hiasan yang kebetulan berdekatan.

   z-index:2 WAJIB, alasannya sama dengan centang di atas: sejak
   .fh-tile__img memakai filter:drop-shadow dia jadi stacking context
   sendiri, dan penanda tanpa z-index akan tenggelam di balik
   ilustrasinya. Cincin sewarna kartu juga dipakai ulang — kotak aset
   terisi warna rarity penuh sampai ke pojok.

   BENTUKNYA BEDA DARI CENTANG, dan itu disengaja. Centang keping
   emas penuh karena dia menjawab "yang mana yang sedang dipakai" —
   satu-satunya keadaan yang perlu ketemu sekali lihat di grid 16
   kartu. Enhance cuma angka pelengkap; kalau dia ikut keping emas,
   dua penanda berebut perhatian dan yang penting justru kalah
   karena jumlahnya lebih banyak. Jadi: pil gelap, teks emas.

   Tingginya dikunci 16px menyamai centang, tapi lebarnya ikut isi
   (padding, bukan width) — "+12" harus muat tanpa merusak barisnya. */
.fh-eqcard__enh{
  position:absolute;top:4px;left:4px;z-index:2;
  height:16px;padding:0 5px;border-radius:8px;
  background:var(--pixel-sunken);color:var(--pixel-primary);
  box-shadow:0 0 0 2px var(--pixel-surface);
  font-family:var(--font-pixel);font-size:8px;line-height:1;
  display:grid;place-items:center;
}

.fh-eqcard.is-locked .fh-eqcard__thumb,
.fh-eqcard.is-locked small{opacity:.35}
/* Ikut diredupkan bersama isinya. Di data sekarang tidak ada
   perlengkapan terkunci yang enh-nya > 0 — memang tidak bisa
   di-enhance sebelum dimiliki — jadi baris ini belum pernah
   berlaku. Ditulis supaya kalau nanti bisa (mis. hadiah event yang
   datang sudah ter-enhance), penandanya tidak menyala terang di
   atas kartu yang seluruh isinya sudah diredupkan. */
.fh-eqcard.is-locked .fh-eqcard__enh{opacity:.35}
.fh-eqcard__lock{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:17px;pointer-events:none;
}


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

body:not(.fh-scaled) .fh-eqstage{height:clamp(190px,26vh,250px)}