/* ============================================================
   profile.css — overlay Profil.
   Butuh: tokens.css, base.css, components.css, overlay.css

   ⚠ Cakupan: yang ada di sini adalah bagian Profil yang SUDAH
   dirancang di prototipe — kartu identitas, VIP, statistik akun,
   dan tanggal bergabung. DESIGN_NOTES menyebut Profil juga akan
   memuat achievement dan leaderboard, tapi keduanya belum
   dirancang, jadi tidak dikarang di sini.

   Latar masalahnya perlu diingat saat menambah bagian baru:
   Profil LAMA mengerjakan empat pekerjaan sekaligus — statistik,
   inventory, favorite/museum/equipment, dan tombol iklan — dan
   itu akar kesesakannya. Inventory dan Equipment sudah pindah ke
   Tas. Jangan bawa mereka kembali ke sini.
   ============================================================ */


/* ============================================================
   KARTU IDENTITAS
   ============================================================ */

.fh-pcard{
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-xl);
  padding:var(--sp-lg) var(--sp-md);
  text-align:center;
}

.fh-pav{position:relative;width:72px;margin:0 auto 10px}
.fh-pav .fh-av{
  --fh-av:72px;
  margin:0 auto;
  border-width:2px;border-color:var(--pixel-primary);
}
/* Bukan VIP: lingkarannya kembali ke garis biasa. Mahkota emas
   di sekeliling foto adalah penanda status, bukan hiasan. */
.fh-pav:not(.is-vip) .fh-av{border-width:1px;border-color:var(--pixel-border)}

.fh-pav__crown{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:22px;height:16px;
}

.fh-pname{display:flex;align-items:center;justify-content:center;gap:7px}
.fh-pname b{font-size:17px;font-weight:600}
.fh-pname.is-vip b{color:var(--pixel-primary)}

/* Title dibuat sebagai tombol karena nanti bisa diganti. Panah
   di kanan yang memberi tahu itu, bukan teks tambahan. */
.fh-ptitle{
  display:flex;align-items:center;gap:8px;
  margin:12px auto 0;padding:7px 10px;
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-md);
  color:var(--pixel-text);
}
.fh-ptitle em{
  font-style:normal;font-size:10px;color:var(--pixel-muted);
  text-transform:uppercase;letter-spacing:.4px;
}
.fh-ptitle b{font-size:13px;font-weight:500}
.fh-ptitle i{font-style:normal;color:var(--pixel-muted);font-size:15px}

.fh-plv{margin-top:14px;text-align:left}
.fh-plv__top{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:6px;
}
.fh-plv__top span{font-size:12px;font-weight:500}
.fh-plv__top small{font-size:11px;color:var(--pixel-muted)}


/* ============================================================
   BAGIAN
   ============================================================ */

.fh-psec{margin-top:var(--sp-lg)}
.fh-psec 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);
}


/* ============================================================
   KARTU VIP
   Satu-satunya blok di layar ini yang boleh memakai emas sebagai
   bidang, bukan cuma aksen — VIP memang titik monetisasi dan
   pantas menonjol. Selebihnya emas tetap dijatah untuk angka.
   ============================================================ */

.fh-pvip{
  background:var(--pixel-surface);
  border:1px solid var(--pixel-primary-dim);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.fh-pvip__hd{
  display:flex;align-items:center;gap:8px;
  padding:11px var(--sp-md);
  background:linear-gradient(90deg,
    rgba(var(--primary-rgb),.16),rgba(var(--primary-rgb),.03));
}
.fh-pvip__hd .fh-crown{width:17px;height:13px}
.fh-pvip__hd b{
  font-family:var(--font-pixel);font-size:11px;
  color:var(--pixel-primary);flex:1;
}
.fh-pvip__xp{padding:var(--sp-md) var(--sp-md) 12px}
.fh-pvip__foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px var(--sp-md);
  border-top:1px solid var(--hairline);
  font-size:12px;
}
.fh-pvip__foot span{color:var(--pixel-muted)}
.fh-pvip__foot b{font-weight:500}

/* Bukan VIP: kartunya tetap ada sebagai ajakan, tapi diredam —
   tidak berpura-pura pemain sudah punya sesuatu. */
.fh-pvip.is-off{border-color:var(--pixel-border)}
.fh-pvip.is-off .fh-pvip__hd{background:var(--pixel-raised)}
.fh-pvip.is-off .fh-pvip__hd b{color:var(--pixel-muted)}
.fh-pvip.is-off .fh-crown{fill:var(--pixel-muted)}


/* ============================================================
   STATISTIK AKUN
   gap:1px di atas latar border = pemisah tanpa border ganda,
   pola yang sama dengan .fh-totals di Home.
   ============================================================ */

.fh-pgrid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--pixel-border);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-lg);overflow:hidden;
}
.fh-pgrid > div{background:var(--pixel-surface);padding:var(--sp-md)}
.fh-pgrid span{display:block;font-size:10px;color:var(--pixel-muted)}
.fh-pgrid b{
  display:block;margin-top:6px;
  font-family:var(--font-pixel);font-size:12px;color:var(--pixel-primary);
  /* Angka statistik bisa panjang (7.412, 17.2M). Dibiarkan
     memotong daripada melebarkan kolom dan merusak grid. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Jumlah kartu ganjil: yang terakhir melebar penuh supaya tidak
   ada sel kosong menggantung di kanan.

   Isinya ikut ditengahkan. Sel selebar dua kolom yang isinya
   menempel di kiri membuat separuh kanannya terbaca sebagai
   ruang kosong yang salah, bukan sebagai satu sel utuh —
   barisnya jadi terlihat timpang padahal justru sudah penuh.

   text-align diwarisi, jadi cukup diatur di sel ini; label dan
   angkanya ikut sendiri tanpa aturan tambahan. */
.fh-pgrid > div:last-child:nth-child(odd){
  grid-column:1 / -1;
  text-align:center;
}


/* ============================================================
   BARIS BERGABUNG — penutup layar, data arsip.
   Dipindah ke sini dari Home: di Home dia menyita ruang untuk
   sesuatu yang dibaca sekali seumur akun.
   ============================================================ */

.fh-pjoin{
  display:flex;align-items:center;gap:10px;
  margin-top:var(--sp-lg);
  padding:11px var(--sp-md);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-lg);
}
.fh-pjoin__ico{
  width:30px;height:30px;flex-shrink:0;
  display:grid;place-items:center;
  border-radius:7px;background:var(--pixel-raised);
  font-size:15px;color:var(--pixel-muted);
}
.fh-pjoin__mid{flex:1;min-width:0}
.fh-pjoin em{
  display:block;font-style:normal;font-size:10px;color:var(--pixel-muted);
  text-transform:uppercase;letter-spacing:.4px;
}
.fh-pjoin__mid b{display:block;font-size:13px;font-weight:500;margin-top:2px}
.fh-pjoin__days{
  flex-shrink:0;
  font-family:var(--font-pixel);font-size:9px;color:var(--pixel-primary);
}


/* ============================================================
   ISI OVERLAY
   ============================================================ */

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


/* ============================================================
   PEMILIHAN TITLE

   Bentuknya bottom sheet, bukan overlay full-screen.

   DESIGN_NOTES menaruh "pilih karakter" dan "pilih equipment" di
   full-screen karena keduanya MODE: ada pratinjau besar dan tabel
   banding yang perlu ruang. Memilih title tidak punya keduanya —
   tidak ada art, tidak ada stat yang dibandingkan, cuma daftar
   yang dibaca lalu ditekan. Itu persis tugas bottom sheet menurut
   dokumen yang sama. Sheet juga menyisakan Profil terlihat di
   belakangnya, jadi jelas apa yang sedang diubah.

   Kalau daftarnya nanti tumbuh melewati ~15 title, tinjau ulang:
   di titik itu sheet mulai terasa sempit dan full-screen jadi
   pilihan yang benar.

   Title TIDAK memakai skala tier. Warna rarity dijatah untuk ikan
   dan karakter; di sini yang membedakan adalah KEADAAN — emas
   untuk yang dipakai, redup untuk yang terkunci.
   ============================================================ */

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

.fh-trow{
  display:flex;align-items:flex-start;gap:var(--sp-sm);
  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-trow + .fh-trow{margin-top:6px}

.fh-trow__main{flex:1;min-width:0}

.fh-trow__name{
  display:block;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Syarat SELALU ditampilkan, termasuk untuk title yang sudah
   dimiliki. Pemain sering lupa kenapa dia punya sesuatu, dan
   daftar tanpa syarat berhenti jadi peta tujuan. */
.fh-trow__req{
  display:block;margin-top:3px;
  font-size:11px;line-height:1.35;color:var(--pixel-muted);
}

.fh-trow__side{flex-shrink:0;display:flex;align-items:center;min-height:20px}

/* Sedang dipakai. */
.fh-trow.is-active{border-color:var(--pixel-primary);background:var(--pixel-surface)}
.fh-trow.is-active .fh-trow__name{color:var(--pixel-primary)}
.fh-trow__now{
  font-family:var(--font-pixel);font-size:7px;letter-spacing:.5px;
  padding:4px 6px;border-radius:var(--r-xs);
  background:var(--pixel-primary);color:var(--ink-on-primary);
  white-space:nowrap;
}

/* Terkunci: diredam, tapi tetap terbaca. Disembunyikan justru
   menghilangkan alasan untuk mengejarnya. */
.fh-trow.is-locked{background:transparent;border-style:dashed}
.fh-trow.is-locked .fh-trow__name{color:var(--pixel-muted)}
.fh-trow__lock{font-size:14px;opacity:.5}

/* Bisa diklaim: satu-satunya baris yang menuntut tindakan, jadi
   satu-satunya yang boleh memakai emas selain yang dipakai. */
.fh-trow.is-claimable{border-color:var(--pixel-primary-dim)}
.fh-tclaim{
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.5px;
  padding:7px 9px;border-radius:var(--r-xs);
  background:var(--pixel-primary);color:var(--ink-on-primary);
  box-shadow:0 2px 0 var(--pixel-primary-dim);
  white-space:nowrap;
}
.fh-tclaim:active{transform:translateY(2px);box-shadow:none}
.fh-tclaim:disabled{
  background:var(--pixel-raised);color:var(--pixel-muted);
  box-shadow:none;transform:none;
}

/* Kemajuan menuju syarat. Hanya untuk yang bisa dihitung —
   syarat yang bergantung event tidak dapat bar, karena 0% di
   sana terbaca mustahil padahal soalnya waktu, bukan jumlah. */
.fh-tprog{display:flex;align-items:center;gap:var(--sp-sm);margin-top:7px}
.fh-tprog .fh-bar{flex:1;color:var(--pixel-muted)}
.fh-tprog small{
  flex-shrink:0;font-size:10px;color:var(--pixel-muted);
  font-variant-numeric:tabular-nums;
}

/* Footer sheet title: TUTUP di kiri, PAKAI di kanan dan lebih
   lebar karena dia tindakan utamanya.

   Tingginya disamakan lewat .fh-tfoot .fh-btn (0,2,0) — .fh-btn
   sendiri 52px dan .fh-btn--ghost 42px, dan dua tombol berdampingan
   dengan tinggi berbeda langsung terlihat salah. */
.fh-tfoot{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--sp-sm)}
.fh-tfoot .fh-btn{height:46px;font-size:9px}

/* Baris yang SEDANG DIPILIH — beda dari yang sedang dipakai.
   Garis tebal emas, pola yang sama dengan kartu terpilih di grid
   perlengkapan. Padding dikurangi 1px supaya barisnya tidak ikut
   membesar saat border menebal. */
.fh-trow.is-sel{border-color:var(--pixel-primary);border-width:2px;padding:9px 11px}


/* ============================================================
   SAKLAR PRIVASI

   Aksennya BIRU (--c-hook), bukan emas. Emas dijatah untuk uang
   dan untuk kartu VIP; saklar yang menyala emas akan terbaca
   sebagai fitur berbayar, dan ini justru kebalikannya - dia gratis
   dan tersedia untuk semua orang.

   Keadaan MENYALA berarti "nama terlihat", bukan "privasi aktif".
   Dua-duanya bisa dibaca dari saklar yang sama dan artinya
   berlawanan, jadi labelnya menyebut apa yang DINYALAKAN
   ("Tampilkan nama di Top Donatur") dan keterangan di kanan
   menyebut keadaan yang sedang berlaku - bukan salah satunya saja.
   ============================================================ */

.fh-psw{
  display:flex;align-items:flex-start;gap:var(--sp-sm);
  width:100%;
  padding:var(--sp-md);
  background:var(--pixel-surface);
  border:1px solid var(--pixel-border);
  border-radius:var(--r-lg);
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.fh-psw:disabled{opacity:.6;cursor:default}

.fh-psw__mid{flex:1;min-width:0;display:block}
.fh-psw__mid b{
  display:block;
  font-size:13px;font-weight:600;color:var(--pixel-text);
  margin-bottom:3px;
}
.fh-psw__mid em{
  display:block;
  font-style:normal;
  font-size:11px;line-height:1.45;color:var(--pixel-muted);
}

/* Keadaan yang SEDANG berlaku, dengan kata yang sama persis dengan
   yang muncul di papan ("Tersembunyi"). Kata yang berbeda untuk
   keadaan yang sama memaksa pemain menebak apakah keduanya memang
   hal yang sama. */
.fh-psw__st{
  flex:none;
  font-family:var(--font-pixel);font-size:8px;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--pixel-muted);
  padding-top:2px;
}
.fh-psw.is-on .fh-psw__st{color:var(--c-hook)}

/* Rel + kenop. Ukurannya 34x18 supaya sasaran tapnya tetap lega
   walau gambarnya kecil - padding kartunya yang menanggung sisa
   luasnya, jadi seluruh kartu bisa ditekan, bukan cuma relnya. */
.fh-psw__tr{
  flex:none;
  position:relative;
  width:34px;height:18px;
  margin-top:1px;
  background:var(--pixel-raised);
  border:1px solid var(--pixel-border);
  border-radius:999px;
  transition:background .12s linear,border-color .12s linear;
}
.fh-psw__tr i{
  position:absolute;top:2px;left:2px;
  width:12px;height:12px;
  background:var(--pixel-muted);
  border-radius:999px;
  transition:transform .12s linear,background .12s linear;
}
.fh-psw.is-on .fh-psw__tr{
  background:rgba(74,159,216,.28);
  border-color:var(--c-hook);
}
.fh-psw.is-on .fh-psw__tr i{
  transform:translateX(16px);
  background:var(--c-hook);
}

/* Gerak dimatikan untuk yang memintanya. Kenop yang meluncur bukan
   informasi - warnanya dan posisinya yang membawa arti, dan
   keduanya tetap utuh tanpa transisi. */
@media (prefers-reduced-motion:reduce){
  .fh-psw__tr,.fh-psw__tr i{transition:none}
}