/* ============================================================ tokens.css — SATU-SATUNYA sumber warna dan ukuran. Dimuat PALING AWAL, sebelum file css lain. Aturan: tidak boleh ada hex hardcoded di file css mana pun selain file ini. Butuh warna baru -> tambah variabel di sini dulu, baru dipakai. ============================================================ */ :root{ /* ---------- Palet dasar "Deep Sea" ---------- */ --pixel-bg:#081521; /* latar utama */ --pixel-surface:#0F2537; /* panel, kartu */ --pixel-raised:#17364C; /* elemen di atas panel, state hover */ --pixel-border:#22506B; /* garis pemisah */ --pixel-text:#E4F0F6; /* teks utama */ --pixel-muted:#7BA2B8; /* label, metadata */ --pixel-primary:#F2B32C; /* SATU-SATUNYA warna aksi */ --pixel-primary-dim:#8F6910; /* bayangan tombol, state tertekan */ /* Lebih gelap dari --pixel-bg. Dua peran: latar badge tier, dan latar di luar stage saat mode terskala. */ --pixel-sunken:#0B1C2A; --pixel-void:#050E17; /* Komponen rgba butuh kanal terpisah — var() tidak bisa dipecah. */ --primary-rgb:242,179,44; --bg-rgb:8,21,33; /* Teks di ATAS bidang berwarna. Jangan pakai --pixel-bg di sini: hitam-navy di atas emas terbaca kotor, ini versi kecoklatan. */ --ink-on-primary:#2A1D00; --ink-on-danger:#2A0906; /* Teks di atas bidang TIER. Netral kebiruan, bukan kecoklatan seperti --ink-on-primary: bidangnya membentang dari hijau rare sampai prisma celestial, dan warna hangat mengotori yang dingin. Diukur terhadap 12 bidang tier: 11 lolos 4.5:1, sisanya (tepi gelap gradient secret) tidak pernah muncul di badge karena gradientnya diperbesar - lihat .fh-fishhd__tier di tas.css. */ --ink-on-tier:#0E1A21; /* ---------- Tier — HANYA ikan dan karakter ---------- Nama tier menentukan warna, bukan jenis itemnya: ikan Legend dan karakter Legend berwarna sama. Equipment TIDAK memakai skala ini — lihat blok gear di bawah. TANGGANYA NAIK, dan urutannya bukan selera. Dari audit bagian 4, peluang munculnya: normal 95% -> epic 4% -> legend 0,85% -> artefak 0,1% -> myth 0,05% -> secret 1:2.218 -> shiny 1:7.605 -> celestial 1:45.000 Tiga langkah warnanya: 1-3 DINGIN dan tenang abu -> hijau -> biru 4-6 TANGGA PANAS kuning -> oranye -> merah 7-9 DI LUAR SPEKTRUM ungu -> magenta -> cyan-ungu Tier 7-9 satu-satunya yang memakai GRADIENT (lihat FH.tierFill di ui.js). Itu bukan hiasan: emas legend secara fisik paling terang di antara warna rata mana pun — sempat diukur 0,63 lawan 0,29 milik secret — jadi warna rata saja tidak akan pernah membuat tier atas menang. Yang menang akhirnya PERLAKUAN: delapan kotak rata, tiga kotak berkilau. Menambah tier baru? Sisipkan menurut peluangnya, dan jaga tiga langkah di atas tetap utuh. FH.TIER_ORDER di ui.js harus ikut diubah — dia yang memutuskan peringkat, bukan urutan baris di sini. ⚠ Audit bagian 4 hanya mencatat DELAPAN tier; "rare" tidak pernah muncul di sana, baik di tabel peluang maupun di daftar EXP. Tokennya dipertahankan karena HANDOFF bagian 1 mendaftarkannya — PASTIKAN ke bot apakah tier ini benar ada. */ --t-normal:#748A99; --t-rare:#3ECF7C; --t-epic:#3D95F0; --t-legend:#FFC93C; --t-artefak:#FF8A2B; --t-myth:#FF3B30; /* ---------- Tiga teratas ---------- Warna pertama tiap tier dipakai TEKS dan badge. Isi kotaknya bukan warna, tapi token *-fill di bawahnya — dan ketiganya sengaja berbeda JENIS permukaan, bukan cuma berbeda warna: secret PERMATA radial, inti menyala, tepi gelap shiny FOIL krom terang + pita holo menyapu celestial PRISMA dua lapis warna yang saling silang Tangga JENIS itu yang membuatnya terbaca langka. Tangga warna saja tidak pernah cukup — sudah dua putaran dicoba dan selalu kalah oleh emas legend yang secara fisik paling terang. SECRET dan SHINY sengaja SEKELUARGA. Di bot tier-nya memang bernama `secret` dan `secret_shiny` (audit bagian 4) — yang kedua varian berkilau dari yang pertama, jadi menaruh keduanya di rona yang tidak berhubungan justru menyembunyikan hubungan yang sebenarnya ada. Yang membedakan mereka nilai TERANG: secret 72% menyala dari dalam, shiny 92% memantul. KENAPA MAGENTA, BUKAN UNGU. Versi sebelumnya ungu dan itu salah walaupun epic di app ini biru (rona 211 lawan 289, terpisah 78 derajat, tidak bertabrakan sama sekali). Masalahnya bukan tabrakan di dalam app, tapi KONVENSI DI LUAR app: di hampir semua game ungu berarti epic, dan arti itu terbawa masuk ke kepala pemain entah palet kita setuju atau tidak. Magenta tidak punya beban arti seperti itu. Ungu juga sudah dipakai --g-3, warna material level 5. Beda laci, tidak pernah tampil bersamaan — tapi tetap ungu kedua di app yang sama. RISIKO YANG DISADARI: magenta rona 322 dan myth merah rona 3 cuma terpisah 43 derajat. Yang menahannya bukan rona, tapi PERMUKAAN — myth kotak merah rata, secret permata dengan tepi nyaris hitam. Badge teksnya pun tidak pernah tampil berdampingan: sheet detail hanya memuat satu ikan. */ --t-secret:#FF6FD0; --t-shiny:#FFD6F2; --t-celestial:#A8F0FF; /* Dipakai tepi kartu celestial; lihat --cel-rainbow. */ --t-celestial-2:#B98CFF; /* PERMATA. Radial, bukan linear: inti terang di kiri-atas lalu jatuh ke plum nyaris hitam membuat kotaknya terbaca seperti batu yang menyala dari dalam. Versi linear dua kali dicoba dan dua kali hasilnya cuma bidang berwarna — persis yang membuat tier ini terasa biasa. Tepi yang nyaris hitam juga yang memisahkannya dari myth: dua-duanya panas, tapi myth rata terang sementara ini jatuh ke gelap di tepinya. */ --t-secret-fill:radial-gradient(circle at 36% 30%, #FFB8E8 0%,#FF4FC4 30%,#C21F8A 62%,#4A0A38 100%); /* FOIL. Terang dan berlapis krom — kebalikan dari secret yang jatuh ke gelap. Pita holo yang menyapu di atasnya (lihat .fh-holo) yang menyelesaikan kesan foil; gradient ini cuma dasarnya. */ --t-shiny-fill:linear-gradient(140deg, #FFF0FA 0%,#FFC4EC 34%,#F06BC8 68%,#A82A78 100%); /* PRISMA. DUA lapis, dan itu yang menjauhkannya dari kesan bendera: lapis bawah menyeberang miring 140 derajat, lapis atas menyilang 35 derajat dengan warna setengah tembus. Persilangan keduanya memecah pita jadi kilau minyak, bukan jalur warna yang sama lebar. Dua hal lain yang menjaganya tetap terbaca foil: - JARAK SINGGAHAN TIDAK RATA. Bendera berpita sama lebar; foil tidak pernah. - HIJAU DAN KUNING MURNI DILEWATI. Justru urutan merah-oranye-kuning-hijau yang membuat mata membacanya sebagai bendera. Yang dipakai keluarga kilau minyak: cyan -> biru -> ungu -> pink -> sorot hangat -> mint. */ --cel-rainbow: linear-gradient(35deg, rgba(120,255,214,.22) 0%,rgba(255,255,255,0) 26%, rgba(255,170,240,.20) 52%,rgba(255,255,255,0) 74%, rgba(150,220,255,.22) 100%), linear-gradient(140deg, #5FE0FF 0%,#7FB2FF 13%,#B98CFF 29%,#F58BE0 43%, #FFD9A8 53%,#8FE8D8 67%,#63C8FF 83%,#A98CFF 100%); /* Versi berulang untuk kilau yang menyapu di tepi kartu. */ --cel-loop:linear-gradient(120deg, #5FE0FF,#B98CFF,#F58BE0,#FFD9A8,#8FE8D8, #5FE0FF,#B98CFF,#F58BE0,#FFD9A8,#8FE8D8); /* ---------- Rarity equipment — diturunkan dari LEVEL ---------- Di game ini joran/kail/umpan dibedakan harga dan level, bukan rarity. Warna dihitung dari lv lewat FH.gearColor(), tidak disimpan sebagai field kedua yang bisa tidak sinkron. lv 0-1 abu | lv 2-4 hijau | lv 5 ungu | lv 6-7 merah */ --g-1:#7E96A6; --g-2:#45C46B; --g-3:#A96BE8; --g-4:#E8574A; /* ---------- Penanda kategori ---------- TIDAK dipakai sebagai warna dekorasi. Ruang hidupnya hanya strip kategori di sheet "Rincian perlengkapan", tempat lima kategori harus dibedakan sekilas tanpa membaca label. Jangan bawa keluar dari sheet itu. */ --c-rod:#F2B32C; --c-hook:#4A9FD8; --c-bait:#3FD9C4; --c-char:#9B6BD6; --c-vip:#E8574A; /* ---------- Delta naik / turun ---------- Dipakai tabel banding "Kini vs Jadi". Penurunan WAJIB terlihat merah — pemain berhak tahu sebelum menekan tombol. */ --up:#45C46B; --down:#E8574A; /* ---------- Medali papan skor ---------- Tiga teratas saja. Ditulis sebagai token sendiri, bukan memakai --pixel-primary langsung, karena ARTINYA berbeda: emas di app ini dipesan untuk AKSI, sementara emas di papan skor adalah medali — arti yang dibawa pemain dari luar app dan tidak perlu dijelaskan. Nilainya kebetulan sama; yang tidak boleh sama adalah alasan memakainya, dan token ini yang menjaga keduanya bisa berubah sendiri-sendiri. Huruf di atasnya memakai --ink-on-tier: ketiga bidang ini terang, sama seperti mayoritas bidang tier. */ --medal-1:#FFC93C; /* emas */ --medal-2:#C4D2DC; /* perak */ --medal-3:#D08A4F; /* perunggu */ /* WARNA PENDAR TIER — kanal terpisah, dan DIAMBIL DARI ISI SLOT, bukan dari warna teksnya. Ini perbedaan yang menentukan. --t-secret dan kawan-kawan di atas adalah warna TEKS dan badge: sengaja dibuat terang supaya terbaca di atas panel gelap. Dipakai sebagai cahaya, warna seterang itu justru pudar — --t-shiny (#FFD6F2) nyaris putih, dan pendarnya berakhir sebagai kabut abu-abu tanpa rona. Yang dipakai di sini inti gradient slotnya, tempat tier itu benar-benar berwarna: secret #FF4FC4 singgahan 30% --t-secret-fill (permata) shiny #F06BC8 singgahan 68% --t-shiny-fill (foil) celestial #5FE0FF singgahan 0% --cel-rainbow (prisma) Enam tier lain warna teksnya memang sudah pekat, jadi nilainya sama persis dengan hex di atas. var() tidak bisa dipecah, jadi rgba(var(--t-secret),.5) tidak akan pernah jalan — itu sebabnya bentuknya kanal, bukan warna. Kalau salah satu gradient slot di atas disetel, nilai di sini ikut; kalau tidak, satu tier akan bercahaya dengan warna yang berbeda dari kotaknya sendiri. ⚠ HANYA UNTUK GARIS DAN CAHAYA TIPIS, jangan untuk BIDANG. Kanal ini tier yang sudah dipipihkan jadi satu warna, dan tiga tier teratas kehilangan justru yang membedakannya: celestial tinggal sian pangkal pelanginya, sementara shiny dan secret jadi dua merah muda yang nyaris kembar. Kartu papan mingguan sempat diwarnai dari sini dan hasilnya persis itu — biru polos dan dua tier yang tidak bisa dibedakan. Untuk bidang, pakai FH.tierFill() yang mengembalikan gradient slot yang sebenarnya. Riwayatnya di rank.css. */ --t-normal-glow-rgb:116,138,153; --t-rare-glow-rgb:62,207,124; --t-epic-glow-rgb:61,149,240; --t-legend-glow-rgb:255,201,60; --t-artefak-glow-rgb:255,138,43; --t-myth-glow-rgb:255,59,48; --t-secret-glow-rgb:255,79,196; --t-shiny-glow-rgb:240,107,200; --t-celestial-glow-rgb:95,224,255; /* Kanal terpisah, alasan yang sama dengan --primary-rgb di atas: var() tidak bisa dipecah, jadi rgba(var(--medal-1),.14) tidak akan pernah jalan. Dipakai kartu podium di papan mingguan untuk mewarnai latar dan pendarnya menurut medali — tiga kartu yang ketiganya bersemu emas menghapus urutan di antara mereka, padahal jarak juara satu ke tiga adalah seluruh ceritanya. */ --medal-1-rgb:255,201,60; --medal-2-rgb:196,210,220; --medal-3-rgb:208,138,79; /* ---------- Peringatan / item terkunci ---------- */ --alert-bg:#2A1210; --alert-border:#5A2B24; --alert-text:#F0B0A8; /* ---------- Koin ---------- */ --coin-hi:#FFE08A; --coin-lo:#B57F0E; /* ---------- Avatar cadangan ---------- Pemain tanpa photo_url dapat lingkaran berisi huruf pertama namanya. Warnanya diturunkan dari user id, bukan diacak, supaya orang yang sama selalu tampil dengan warna yang sama di tiap sesi — itu yang membuatnya berguna sebagai penanda di chat. Semuanya sengaja diredam: ini latar untuk satu huruf, bukan penanda rarity, dan tidak boleh ikut berebut perhatian dengan skala tier. */ --av-1:#3E7EA6; --av-2:#8A5FB0; --av-3:#4E9E7A; --av-4:#B0703C; --av-5:#A8556B; --av-6:#4C6FB5; /* ---------- Chip klan (kesan logam) ---------- */ --clan-hi:#E8EFF3; --clan-mid:#A9BCC7; --clan-lo:#D3DFE6; --clan-ink:#0E2130; /* ---------- Holo & kilip ---------- Pita cahaya menyapu untuk tier Shiny dan Celestial, plus titik-titik berkilip khusus Celestial. Tiga warna, bukan putih polos: putih rata terbaca sebagai "kena lampu", sementara pergeseran hijau-toska -> putih -> ungu itu yang membuatnya terbaca sebagai permukaan HOLOGRAFIS. Persis alasan kartu foil kelihatan mahal. */ --holo-a:rgba(120,255,214,.42); --holo-b:rgba(255,255,255,.72); --holo-c:rgba(198,150,255,.42); --holo-0:rgba(255,255,255,0); /* ujung pita, alpha nol */ --spark:rgba(255,255,255,.95); /* inti titik kilip, nyaris putih penuh */ --spark-mid:rgba(255,255,255,.38); /* halo tipis; yang membuat titik terbaca TEBAL tanpa harus memperbesar radius sampai jadi bulatan kasar */ /* ---------- Efek permukaan ---------- Kotak slot dan thumbnail memakai tumpukan yang sama; ditokenkan supaya kilau kotak tidak melenceng antar layar. */ --gloss-hi:rgba(255,255,255,.22); --gloss-lo:rgba(0,0,0,.18); --edge-in:rgba(255,255,255,.18); --edge-dark:rgba(0,0,0,.35); --art-edge:rgba(0,0,0,.7); /* garis tepi di sekeliling aset ikan; lihat .fh-bagtile img di tas.css */ --scanline:rgba(255,255,255,.02); --backdrop:rgba(3,10,17,.72); --shadow-sheet:0 18px 40px rgba(3,10,17,.55); --emboss-in:rgba(0,0,0,.22); /* cekungan di dalam keping koin */ --gloss-edge:rgba(255,255,255,.45); /* tepi terang chip klan logam */ --drop-nav:rgba(3,10,17,.5); /* bayangan padat ikon nav yang menyembul */ --hairline:rgba(34,80,107,.35); /* pemisah di dalam kartu, lebih redup dari --pixel-border */ /* ---------- Spacing ---------- */ --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; /* ---------- Radius ---------- */ --r-xs:3px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; /* ---------- Font ---------- Font pixel HANYA untuk angka, judul layar, dan nama item. Teks di bawah 14px pakai --font-ui: font pixel di ukuran kecil tidak terbaca di layar HP. */ --font-pixel:'Press Start 2P',monospace; --font-ui:'Inter',system-ui,sans-serif; /* ---------- Ukuran komponen tetap ---------- */ --nav-h:60px; --nav-ico:40px; /* aset 40x40 */ --nav-ico-on:58px; /* aset 58x58, dihasilkan terpisah bukan di-scale CSS */ --gear-ico:66px; /* aset 256x256 */ /* Batas atas pratinjau gear di overlay ganti perlengkapan, sejajar dengan sprite karakter di panggung yang sama. 200 x 2 = 400px; aset gear 384px menutupinya dalam selisih 4%. Naik dari 132px, yang membuat ilustrasi cuma mengisi ~53% tinggi panggung. */ --gear-ico-lg:200px; /* pratinjau di overlay */ /* SIKLUS SAPUAN PITA HOLO. Ditaruh di sini karena DUA animasi bergantung padanya: sapuan itu sendiri, dan transformasi wujud ikan yang durasinya dihitung 2x angka ini (lihat fh-ubin1/2 di components.css). Ditulis dua kali sebagai angka mati, keduanya akan menyimpang begitu salah satunya diubah. */ --holo-dur:8s; --stage-w:390px; /* lebar stage mode terskala */ --stage-h:800px; --app-max:440px; /* lebar maksimum kolom konten di mode native */ /* ---------- Lapisan ---------- Sticky tanpa z-index eksplisit akan tertimpa. Semua nilai z diambil dari sini, jangan tulis angka langsung di komponen. */ --z-hdr:20; --z-subbar:15; /* baris yang menempel DI BAWAH header, mis. saring di Tas */ --z-nav:25; --z-backdrop:40; --z-sheet:41; --z-overlay:60; /* Di atas SEMUA lapisan, termasuk yang z-nya dibagikan restack() menurut kedalaman tumpukan. Toast melaporkan hasil tindakan yang diambil DI DALAM sheet atau dialog, jadi dia harus bisa terbaca di atas keduanya. */ --z-toast:200; }