/* ==========================================================================
   TEMA WARNA
   ==========================================================================
   Seluruh rancangan halaman ada di mnj-design.css dan dipakai bersama oleh
   semua situs lewat [data-design="mnj"]. Berkas ini hanya menyetel WARNANYA.

   Cara kerjanya: rancangan itu tidak pernah menyebut warna secara langsung.
   Ia memakai dua keluarga variabel yang didefinisikan di hud.css,

     --hud-gold-*   warna DOMINAN   (tepi tombol, judul, penekanan)
     --hud-blue-*   warna PENYERTA  (persentase, status sistem, aksen kedua)

   dan tema tinggal menimpa keduanya. Nama "gold" dan "blue" dipertahankan
   apa adanya - mengganti namanya berarti menyunting 123 pemakaian var() dan
   ratusan nilai lain tanpa satu pun perubahan yang terlihat di layar.
   Bacalah sebagai "dominan" dan "penyerta", bukan sebagai emas dan biru.

   --hud-*-rgb adalah triplet angka, bukan warna jadi. Itu yang membuat
   seluruh varian tembus pandang - rgba(...,.12) sampai rgba(...,.72), 158
   tempat di rancangannya - ikut berubah tanpa perlu ditulis ulang per tema.

   Berkas ini WAJIB dimuat setelah hud.css. Nilai bawaan di sana ditulis pada
   :root, dan :root berbobot sama dengan [data-theme="..."] - yang menang
   adalah yang belakangan. Kalau urutannya terbalik, temanya diam saja tanpa
   pesan galat apa pun.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MERAH + PUTIH  (Slot Gembira)
   --------------------------------------------------------------------------
   Merah pekat sebagai warna dominan, putih sebagai penyertanya. Putihnya
   sengaja tidak murni #fff untuk seluruh keluarga: di atas bidang gelap,
   putih murni pada garis setipis satu piksel terbaca menyilaukan. Yang
   dipakai putih kebiruan yang sangat terang - tetap terbaca putih, tapi
   tepinya tidak menggigit.
   -------------------------------------------------------------------------- */

[data-theme="red_white"] {
  --theme-bg: #140507;
  --theme-primary: #e2313f;
  --theme-secondary: #eef3f8;
  --theme-accent: #ff6b78;

  --hud-gold-rgb: 226, 49, 63;
  --hud-gold-bright-rgb: 255, 107, 120;
  --hud-gold-deep-rgb: 155, 22, 34;
  --hud-gold-dark-rgb: 109, 13, 22;
  --hud-gold-glow-rgb: 255, 226, 229;
  --hud-gold-hot: #fff0f1;
  --hud-gold-ink: #ffffff;

  /* Tepi PUTIH - merah di atas latar merah gelap hampir tidak terbaca
     sebagai garis. Sorotnya merah cerah, bukan putih yang lebih terang:
     yang berubah RONA, bukan sekadar kecerahan, dan rona jauh lebih cepat
     tertangkap mata. */
  --hud-tepi-rgb: 255, 255, 255;
  --hud-sorot-rgb: 255, 62, 78;

  --hud-gold-dark: #6d0d16;
  --hud-gold: #c81e2c;
  --hud-gold-bright: #ff6b78;
  --hud-gold-deep: #9b1622;
  --hud-gold-muted: #8d3038;
  --hud-gold-text: #ff8f99;
  --hud-gold-label: #ffd9dd;

  --hud-blue-rgb: 226, 232, 240;
  --hud-cyan-rgb: 255, 255, 255;
  --hud-blue: #dfe7f0;
  --hud-blue-bright: #ffffff;
  --hud-blue-deep: #aebccb;
  --hud-blue-white: #f7fafd;

  /* connection-fx.css memelihara paletnya sendiri untuk animasi koneksi di
     hero, dan .generate-game meminjam --fx-blue untuk tepinya. Tanpa baris
     ini, tombol POLA MAIN tetap biru di tema mana pun - dan itu memang
     terjadi sampai diukur. */
  --fx-blue: #e2313f;
  --fx-blue-light: #ffe8ea;
  --fx-blue-glow: rgba(226, 49, 63, .30);
}

/* --------------------------------------------------------------------------
   UNGU + LIME STABILO  (Semesta88)
   --------------------------------------------------------------------------
   Ungu sebagai warna dominan, lime stabilo sebagai penyertanya.

   Lime-nya sengaja ditaruh di slot PENYERTA, bukan dominan. Warna stabilo
   punya terang yang jauh di atas warna lain; dipakai sebagai warna utama ia
   akan menenggelamkan seluruh halaman dan membuat teks di atasnya sulit
   dibaca. Sebagai penyerta - dipakai pada persentase, status, dan aksen
   kecil - justru di situlah ia bekerja: menyala di antara ungu yang tenang.
   -------------------------------------------------------------------------- */

[data-theme="purple_lime"] {
  --theme-bg: #0f0718;
  --theme-primary: #8b3ff0;
  --theme-secondary: #c6ff2e;
  --theme-accent: #d4ff3d;

  --hud-gold-rgb: 139, 63, 240;
  --hud-gold-bright-rgb: 192, 140, 255;
  --hud-gold-deep-rgb: 92, 31, 174;
  --hud-gold-dark-rgb: 58, 21, 104;
  --hud-gold-glow-rgb: 236, 221, 255;
  --hud-gold-hot: #f5ecff;
  --hud-gold-ink: #ffffff;

  /* Tepi lime supaya garisnya menyala di atas ungu gelap; sorotnya magenta
     terang - warna ketiga yang tidak ada di tema ini, jadi tiap sentuhan
     langsung terbaca. */
  /* Foto Semesta88 punya cincin RTP yang duduk lebih tinggi daripada foto
     Manjabet yang jadi patokan seluruh koordinat animasi. Fotonya digeser
     turun supaya cincinnya bertemu garis energi.

     Diukur dari tangkapan layar: berkas energi jatuh di 48,9% tinggi foto
     sementara pusat cincin RTP di 51,8% - cincinnya 2,9% terlalu rendah.
     Nilai negatif menaikkan foto sehingga cincinnya turun menemui garis.

     Percobaan pertama saya isi +2,5% dengan arah yang keliru, dan itu justru
     mendorong cincinnya makin jauh ke bawah.

     Kalau foto barunya nanti dibuat mengikuti koordinat baku - cincin di
     x 50%, y 47,5% - nilai ini bisa dikembalikan ke 0. */
  /* Negatif = naik. Dinaikkan lagi dari -1.8% karena pusat foto masih
     duduk sedikit di bawah pusat cincin, dan selisih itu paling terlihat
     justru setelah cincinnya dipertebal. */
  --fx-foto-geser-y: -3.4%;

  --hud-tepi-rgb: 198, 255, 46;
  --hud-sorot-rgb: 255, 64, 200;

  --hud-gold-dark: #3a1568;
  --hud-gold: #7a2fd8;
  --hud-gold-bright: #c08cff;
  --hud-gold-deep: #5c1fae;
  --hud-gold-muted: #5c3a8a;
  --hud-gold-text: #c9a4ff;
  --hud-gold-label: #ead9ff;

  --hud-blue-rgb: 168, 230, 10;
  --hud-cyan-rgb: 212, 255, 61;
  --hud-blue: #a8e60a;
  --hud-blue-bright: #d4ff3d;
  --hud-blue-deep: #7fae00;
  --hud-blue-white: #eeffc4;

  --fx-blue: #a8e60a;
  --fx-blue-light: #f2ffd6;
  --fx-blue-glow: rgba(168, 230, 10, .30);
}

/* ==========================================================================
   PALET --theme-* : SISTEM WARNA KEDUA
   ==========================================================================
   variables.css memelihara keluarga variabelnya sendiri (--theme-primary,
   --theme-text-secondary, --theme-body-gradient, dan seterusnya) yang dipakai
   style.css, components.css, dan generator.css. Ia sama sekali terpisah dari
   keluarga --hud-* di hud.css.

   Selama hanya --hud-* yang ditemakan, halaman tetap menyisakan emas di
   tempat-tempat yang memakai keluarga ini: lencana UPDATE RTP, kalimat
   callout hero, judul bergradien, garis kisi latar, dan tepi kartu. Terukur
   52 tempat pada tema ungu - semuanya dari sini, tidak satu pun dari
   carousel.

   Blok navy_gold di variables.css hanya menimpa dua gradien judul, sisanya
   mewarisi :root. Karena itu dua tema di bawah harus menulis lengkap.
   ========================================================================== */

[data-theme="red_white"] {
  /* Cincin berputar di sekeliling foto hero, kartu provider, dan bilah
     penyaring memakai tiga warna sapuan ini. Yang ketiga bernada emas di
     bawaannya - itu yang menyisakan kilau keemasan di tema lain. */
  --theme-ai-stroke-1: rgba(226, 49, 63, .72);
  --theme-ai-stroke-2: rgba(255, 255, 255, .95);
  --theme-ai-stroke-3: rgba(255, 107, 120, .72);
  --theme-surface: #1d0a0d;
  --theme-surface-elevated: #2a1013;
  --theme-surface-deep: #120507;
  --theme-surface-soft: rgba(48, 20, 24, .74);


  --theme-primary-light: #ff6b78;
  --theme-primary-bright: #ff8f99;
  --theme-primary-dark: #8f1420;
  --theme-primary-soft: rgba(226, 49, 63, .14);

  --theme-secondary-light: #ffffff;
  --theme-secondary-soft: rgba(238, 243, 248, .12);
  --theme-accent-soft: rgba(255, 255, 255, .12);

  --theme-text: #fff5f6;
  --theme-text-secondary: #d8c3c6;

  /* Putih-keabuan, bukan merah. Di bidang maroon, garis merah hampir
     menyatu dengan latarnya sehingga tepi kartu hilang; putih tipis
     memberi batas jelas tanpa berteriak seperti putih penuh.

     Nilai ini yang dipakai --color-border-gold, dan dari sanalah border
     .generator-card diambil. */
  --theme-border-strong: rgba(255, 252, 252, .5);
  --theme-border-accent: rgba(238, 243, 248, .26);
  --theme-glow-primary: rgba(226, 49, 63, .14);
  --theme-glow-secondary: rgba(238, 243, 248, .10);

  --theme-body-gradient:
    radial-gradient(circle at 18% 8%, rgba(226, 49, 63, .12), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(238, 243, 248, .06), transparent 26%),
    linear-gradient(180deg, #140507 0%, #1c090c 100%);
  --theme-grid-line-primary: rgba(255, 107, 120, .018);
  --theme-grid-line-secondary: rgba(238, 243, 248, .018);
  --theme-disclaimer-bg: rgba(226, 49, 63, .045);
  --theme-header-bg: rgba(20, 5, 7, .72);
  --theme-header-bg-scrolled: rgba(20, 5, 7, .96);

  /* Kedua ujungnya dulu #8f1420 - merah tua yang kontrasnya cuma 2,3:1 di
     atas latar gelap, jadi awal dan akhir judul praktis lenyap. Sekarang
     ujungnya naik ke merah tema (4,5:1) dan puncaknya nyaris putih, sehingga
     seluruh rentang huruf tetap terbaca sambil kesan kilau logamnya justru
     menguat - bukan hilang. */
  --theme-title-gradient: linear-gradient(100deg, #e2313f 0%, #ff6b78 30%, #fff2f3 54%, #ff6b78 76%, #e2313f 100%);
  --theme-section-title-gradient: linear-gradient(90deg, #e2313f 0%, #ff8f99 34%, #fff5f6 58%, #ff8f99 78%, #e2313f 100%);
}

[data-theme="purple_lime"] {
  --theme-ai-stroke-1: rgba(139, 63, 240, .72);
  --theme-ai-stroke-2: rgba(212, 255, 61, .95);
  --theme-ai-stroke-3: rgba(192, 140, 255, .72);
  --theme-surface: #170d26;
  --theme-surface-elevated: #1f1233;
  --theme-surface-deep: #0d0717;
  --theme-surface-soft: rgba(36, 22, 58, .74);

  --theme-primary-light: #c08cff;
  --theme-primary-bright: #d7b6ff;
  --theme-primary-dark: #5c1fae;
  --theme-primary-soft: rgba(139, 63, 240, .14);

  --theme-secondary-light: #d4ff3d;
  --theme-secondary-soft: rgba(198, 255, 46, .12);
  --theme-accent-soft: rgba(212, 255, 61, .12);

  --theme-text: #f7f2ff;
  --theme-text-secondary: #c9bede;

  --theme-border-strong: rgba(139, 63, 240, .35);
  --theme-border-accent: rgba(198, 255, 46, .26);
  --theme-glow-primary: rgba(139, 63, 240, .14);
  --theme-glow-secondary: rgba(198, 255, 46, .10);

  --theme-body-gradient:
    radial-gradient(circle at 18% 8%, rgba(139, 63, 240, .14), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(198, 255, 46, .06), transparent 26%),
    linear-gradient(180deg, #0f0718 0%, #160c24 100%);
  --theme-grid-line-primary: rgba(192, 140, 255, .018);
  --theme-grid-line-secondary: rgba(198, 255, 46, .018);
  --theme-disclaimer-bg: rgba(139, 63, 240, .045);
  --theme-header-bg: rgba(15, 7, 24, .72);
  --theme-header-bg-scrolled: rgba(15, 7, 24, .96);

  --theme-title-gradient: linear-gradient(100deg, #8b3ff0 0%, #c08cff 30%, #f7f0ff 54%, #c08cff 76%, #8b3ff0 100%);
  --theme-section-title-gradient: linear-gradient(90deg, #8b3ff0 0%, #d7b6ff 34%, #faf5ff 58%, #d7b6ff 78%, #8b3ff0 100%);
}

/* ==========================================================================
   GARIS PUTIH TIPIS DI JUDUL BESAR
   ==========================================================================
   Judulnya dicat gradien yang diklip ke huruf, dan huruf berwarna di atas
   gambar hero yang ramai selalu sulit dibaca - bukan karena warnanya kurang
   terang, tapi karena tepinya bertemu latar yang detailnya banyak. Garis tipis
   memberi batas yang tegas di situ.

   paint-order: stroke fill menaruh garisnya DI BELAKANG isi huruf. Tanpa itu,
   -webkit-text-stroke menggambar garis tepat di tengah tepi glyph dan memakan
   setengah ketebalannya - huruf tebal jadi terlihat kurus dan kotor.

   text-shadow-nya sengaja gelap, bukan putih: fungsinya memisahkan huruf dari
   gambar di belakangnya. Dua-duanya terang justru membuat batasnya lenyap.
   ========================================================================== */

[data-theme="red_white"] .hero-copy h1,
[data-theme="purple_lime"] .hero-copy h1 {
  -webkit-text-stroke: .7px rgba(255, 255, 255, .5);
  paint-order: stroke fill;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

/* Judul bagian lebih kecil, jadi garisnya ikut ditipiskan - garis setebal .7px
   pada huruf 22px sudah mulai menutup rongga di dalam huruf seperti 'e' dan 'a'. */
[data-theme="red_white"] .section-title,
[data-theme="purple_lime"] .section-title,
[data-theme="red_white"] h2.section-title,
[data-theme="purple_lime"] h2.section-title {
  -webkit-text-stroke: .4px rgba(255, 255, 255, .42);
  paint-order: stroke fill;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}