/* ==========================================================================
   RANCANGAN MNJ
   ==========================================================================
   Penyesuaian tampilan mengikuti rancangan yang diberikan: carousel provider
   coverflow 3D, bar status berlabel, kartu game bertombol berdampingan, dan
   bar "tampilkan lebih banyak".

   CAROUSEL PROVIDER — 3D COVERFLOW
   ==========================================================================
   Kartu tengah besar dan menyala; kartu samping mengecil, miring, dan
   meredup. Kemiringan dihitung dari --offset yang diisi JavaScript
   berdasarkan posisi gulir yang sebenarnya, jadi tampilannya selalu cocok
   dengan apa yang terlihat.

   Di layar sempit seluruh transform 3D dimatikan dan diganti geser biasa
   dengan scroll-snap, sesuai catatan "mobile lightweight" di brief.
   ========================================================================== */

.provider-section { position: relative; }

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

.provider-selection__header {
  position: relative;
  margin-bottom: 18px;
  text-align: center;
}

.provider-selection__title {
  margin: 0;
  background: linear-gradient(180deg, var(--hud-gold-bright), var(--hud-gold) 55%, var(--hud-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--hud-gold);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: .01em;
  -webkit-text-fill-color: transparent;
}

.provider-selection__help {
  max-width: 640px;
  margin: 7px auto 0;
  color: var(--hud-text-secondary);
  font-size: 12px;
}

/* Titik hijau penanda provider aktif. Penghitungnya sendiri kini berada di
   dalam tombol Semua Provider, bukan lagi paragraf tersendiri di kepala
   bagian - aturan tata letak paragraf itu ikut dibuang. */
.provider-online__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hud-green);
  box-shadow: 0 0 8px rgba(57, 229, 140, .8);
}

/* ==========================================================================
   TOMBOL SEMUA PROVIDER
   ==========================================================================
   Penyaring global, jadi berdiri sendiri di tengah atas carousel.
   ========================================================================== */

.provider-all-slot {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

/* Gayanya disamakan dengan kartu tengah carousel: tepi biru bercahaya
   berlapis dengan siku emas, sehingga keduanya terbaca sebagai satu
   keluarga - "ini yang sedang aktif". */
.provider-all-slot .provider-button {
  --chamfer: 12px;
  position: relative;
  width: auto;
  min-width: 320px;
  max-width: 100%;
  height: 54px;
  flex: 0 0 auto;
  padding: 0 34px;
  border: 2px solid var(--hud-blue-bright);
  border-radius: 0;
  background: linear-gradient(150deg, #0d1420, #0a0d15);
  box-shadow:
    0 0 0 1px rgba(var(--hud-blue-rgb), .55),
    0 0 0 5px rgba(var(--hud-blue-rgb), .16),
    0 0 30px rgba(var(--hud-blue-rgb), .45),
    0 12px 30px rgba(0, 0, 0, .5);
  color: var(--hud-gold-label);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: none;
  clip-path: polygon(
    var(--chamfer) 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)),
    0 var(--chamfer)
  );
}

/* Tombolnya berjajar mendatar: ikon lalu teks. components.css memberinya
   display grid, yang membuat ikon dan teks saling menumpuk. */
.provider-all-slot .provider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.provider-all-slot .provider-button__icon {
  flex: 0 0 18px;
  color: var(--hud-gold-bright);
}

/* Siku emasnya disamakan persis dengan kartu tengah carousel: inset 5px di
   keempat sisi dan ukuran 14px. Sebelumnya 5px/8px dan 11px, sehingga
   sikunya terlihat lebih rapat dan lebih kecil daripada di carousel. */
.provider-all-slot .provider-button .provider-corner { display: block; inset: 5px; }

/* -- penghitung di dalam tombol ------------------------------------------ */

/* Penghitung adalah satu-satunya teks di tombol ini, jadi ukurannya setara
   label tombol - bukan teks kecil seperti waktu masih ada "Semua Provider"
   di atasnya. */
.provider-button__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hud-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  white-space: nowrap;
}

.provider-button__count [data-provider-online-count] {
  color: var(--hud-blue-bright);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .provider-button__count { font-size: 11px; letter-spacing: .07em; }
  .provider-button__count [data-provider-online-count] { font-size: 14px; }
}

/* ==========================================================================
   RANGKA CAROUSEL
   ========================================================================== */

.provider-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  /* Ruang perspektif untuk kartu-kartunya. Nilai besar supaya kemiringannya
     terasa dalam tanpa membuat kartu pinggir terlihat menyimpang. */
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

/* Panggung, bukan daftar bergulir. Kartu ditumpuk di tengah lalu digeser
   ke posisinya lewat transform, sehingga lima posisinya selalu tepat. */
.provider-list {
  /* Jarak antar posisi. Rancangan menyebut +-60px dan +-140px, tapi angka
     itu mengasumsikan kartu yang jauh lebih kecil; dengan kartu 200px yang
     diperbesar 1,18x di tengah, kartunya akan saling menimpa hampir penuh.
     Angka di bawah dihitung dari lebar kartu supaya bersinggungan sedikit
     saja, dan mengecil mengikuti lebar layar. */
  --near-x: 215px;
  --side-x: 390px;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  height: 190px;
  padding: 0;
  overflow: visible;
  transform-style: preserve-3d;
}

/* Pantulan cahaya di lantai bawah kartu aktif. */
.provider-carousel::after {
  position: absolute;
  z-index: 0;
  bottom: 26px;
  left: 50%;
  width: min(420px, 60%);
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(var(--hud-blue-rgb), .22), transparent 70%);
  content: "";
  opacity: .9;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ==========================================================================
   KARTU PROVIDER
   ========================================================================== */

.provider-list .provider-button {
  --chamfer: 16px;
  position: absolute;
  z-index: 1;
  display: grid;
  width: 200px;
  height: 116px;
  place-items: center;
  padding: 14px 16px;
  border: var(--hud-edge-strong) solid rgba(var(--hud-gold-rgb), .55);
  border-radius: 0;
  background: linear-gradient(155deg, #0d1220 0%, #05070d 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
  transform-origin: center center;
  /* 360ms - di dalam rentang 300-400ms yang disarankan rancangan. */
  transition:
    transform 360ms var(--hud-ease),
    opacity 360ms var(--hud-ease),
    border-color var(--hud-hover) ease,
    box-shadow var(--hud-hover) ease;
  clip-path: polygon(
    var(--chamfer) 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)),
    0 var(--chamfer)
  );

}

.provider-list .provider-button[hidden] { display: none; }

/* ==========================================================================
   LIMA POSISI
   ==========================================================================
   Angka di bawah ini mengikuti tabel transformasi pada rancangan:

     posisi              scale  rotateY  translateX  opacity  z-index
     ACTIVE CENTER       1.18    0deg      0px         1        5
     NEAR LEFT / RIGHT   0.94   +-10deg   +-60px       0.85     3
     SIDE LEFT / RIGHT   0.78   +-16deg   +-140px      0.45     1
   ========================================================================== */

.provider-list .provider-button[data-slot="center"] {
  z-index: 5;
  opacity: 1;
  transform: translateX(0) rotateY(0deg) scale(1.18);
}

.provider-list .provider-button[data-slot="near-left"] {
  z-index: 3;
  opacity: .85;
  transform: translateX(calc(var(--near-x) * -1)) rotateY(10deg) scale(.94);
}

.provider-list .provider-button[data-slot="near-right"] {
  z-index: 3;
  opacity: .85;
  transform: translateX(var(--near-x)) rotateY(-10deg) scale(.94);
}

.provider-list .provider-button[data-slot="side-left"] {
  z-index: 1;
  opacity: .45;
  transform: translateX(calc(var(--side-x) * -1)) rotateY(16deg) scale(.78);
}

.provider-list .provider-button[data-slot="side-right"] {
  z-index: 1;
  opacity: .45;
  transform: translateX(var(--side-x)) rotateY(-16deg) scale(.78);
}

/* Logo tidak boleh pernah diperbesar melebihi ukuran berkasnya.
   Semua 36 berkas logo maksimal 116x55 (31 di antaranya tepat segitu).
   Sebelumnya logo diperbesar tiga kali berlipat: kotaknya diisi penuh
   (width 100% di components.css), lalu fitProviderLogo menaikkan skala
   sampai 2,5x, lalu kartu tengah mengalikan 1,18x lagi - totalnya bisa
   1,7x di atas resolusi asli, dan itulah yang membuatnya buram.

   Batas 98x46 dipilih supaya setelah dikalikan 1,18x di kartu tengah,
   hasilnya pas 116x55 - tepat ukuran aslinya, tidak lebih.
   Kalau nanti ada berkas logo beresolusi lebih tinggi, angka ini bisa
   dinaikkan mengikuti ukuran berkas barunya. */
.provider-list .provider-button .provider-logo {
  width: auto;
  height: auto;
  max-width: 98px;
  max-height: 46px;
  margin: auto;
  object-fit: contain;
  /* Skala pembesar dari fitProviderLogo dimatikan di sini; tujuannya
     merapikan logo yang banyak ruang kosongnya, tapi caranya memperbesar
     dan itu justru sumber buramnya. */
  transform: none;
  transition: filter var(--hud-hover) ease;
  filter: saturate(.9) brightness(.96);
}

/* -- kartu tengah: besar, terang, bertepi emas tebal + cahaya biru -------- */
.provider-list .provider-button.is-center {
  z-index: 3;
  border-width: 2px;
  border-color: var(--hud-gold-bright);
  background: linear-gradient(155deg, #141a2a 0%, #070a12 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .7),
    0 0 26px rgba(var(--hud-gold-rgb), .38),
    0 0 60px rgba(var(--hud-blue-rgb), .32),
    0 22px 46px rgba(0, 0, 0, .6);
}

.provider-list .provider-button.is-center .provider-logo { filter: none; }

/* Kilau biru di tepi kanan digantikan sapuan cahaya pada kartu tengah,
   lihat bagian "RANGKA KARTU YANG BERJENJANG" di bawah. */

/* -- lencana AKTIF pada kartu yang sedang dipilih ------------------------- */
.provider-list .provider-button.active::before {
  position: absolute;
  bottom: -11px;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 3px 12px 3px 20px;
  border: 1px solid var(--hud-gold-edge-strong);
  border-radius: 999px;
  background: var(--hud-gold-ink);
  color: var(--hud-gold-label);
  content: "AKTIF";
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
  transform: translateX(-50%);
}

/* Titik kecil di dalam lencana AKTIF. */
.provider-list .provider-button.active::after {
  position: absolute;
  bottom: -4px;
  left: calc(50% - 22px);
  z-index: 5;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-gold);
  content: "";
  box-shadow: 0 0 6px var(--hud-gold);
}

/* Kartu tengah yang sekaligus aktif tetap memakai kilau birunya. */
.provider-list .provider-button.active.is-center::after {
  bottom: -4px;
  left: calc(50% - 22px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-gold);
  box-shadow: 0 0 6px var(--hud-gold);
  filter: none;
  top: auto;
  right: auto;
}

@media (hover: hover) and (pointer: fine) {
  .provider-list .provider-button:hover { border-color: var(--hud-gold-edge-strong); }
  .provider-list .provider-button:hover .provider-logo { filter: none; }
}

.provider-list .provider-button:focus-visible {
  outline: 2px solid var(--hud-blue-bright);
  outline-offset: 3px;
}

/* ==========================================================================
   TOMBOL PANAH
   ========================================================================== */

.provider-carousel__nav {
  position: relative;
  z-index: 4;
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border: var(--hud-edge-strong) solid var(--hud-gold-edge-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1a1408, #07090f 70%);
  box-shadow: 0 0 16px rgba(var(--hud-gold-rgb), .18), 0 8px 20px rgba(0, 0, 0, .5);
  color: var(--hud-gold-bright);
  cursor: pointer;
  transition: border-color var(--hud-hover) ease, box-shadow var(--hud-hover) ease, opacity var(--hud-hover) ease;
}

.provider-carousel__nav:disabled { cursor: not-allowed; opacity: .32; }

@media (hover: hover) and (pointer: fine) {
  .provider-carousel__nav:not(:disabled):hover {
    border-color: var(--hud-gold-bright);
    box-shadow: 0 0 24px rgba(var(--hud-gold-rgb), .35), 0 8px 20px rgba(0, 0, 0, .5);
  }
}

/* ==========================================================================
   TITIK HALAMAN
   ========================================================================== */

.provider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.provider-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--hud-gold-rgb), .28);
  cursor: pointer;
  transition: width var(--hud-hover) var(--hud-ease), background var(--hud-hover) ease;
}

.provider-dot.is-active { width: 26px; background: var(--hud-gold); }

.provider-dot:focus-visible {
  outline: 2px solid var(--hud-blue-bright);
  outline-offset: 3px;
}

/* ==========================================================================
   LAYAR SEMPIT — GESER RINGAN, TANPA 3D
   ========================================================================== */

@media (max-width: 767px) {
  .provider-carousel { perspective: none; gap: 6px; }
  .provider-list {
    gap: 10px;
    padding: 26px 0 26px;
    transform-style: flat;
    scroll-snap-type: x mandatory;
  }

  /* Transform 3D dilepas seluruhnya; kartu tengah hanya sedikit membesar. */
  .provider-list .provider-button {
    flex-basis: 132px;
    width: 132px;
    height: 82px;
    opacity: .72;
    transform: none;
  }

  .provider-list .provider-button.is-center {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 0 18px rgba(var(--hud-gold-rgb), .3), 0 10px 22px rgba(0, 0, 0, .55);
  }

  .provider-list .provider-button.is-center::after { display: none; }
  .provider-carousel::after { display: none; }

  .provider-carousel__nav { width: 40px; height: 40px; flex-basis: 40px; }
  .provider-all-slot .provider-button { min-width: 0; width: 100%; height: 48px; font-size: 12px; }
}

/* ==========================================================================
   GERAK MINIM
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .provider-list { scroll-behavior: auto; }
  .provider-list .provider-button {
    transition: border-color var(--hud-hover) ease, box-shadow var(--hud-hover) ease;
    transform: none;
    opacity: 1;
  }
  .provider-list .provider-button.is-center { transform: none; }
  .provider-dot { transition: none; }
}

/* components.css memberi tombol "Semua Provider" ikon kisi lewat ::after.
   Ikonnya sekarang digambar ::before di sebelah teks, jadi yang lama
   dimatikan supaya tidak muncul dua ikon. */
.provider-all-slot .provider-button.is-all-providers::after { display: none; content: none; }


/* ==========================================================================
   KARTU GAME & BAR BAWAH — menyesuaikan rancangan MNJ
   ========================================================================== */

/* Tinggi kartu diseragamkan. Sebelumnya kartu yang punya MAXWIN 32px lebih
   tinggi dari tetangganya sehingga barisnya terlihat bergerigi. Kartu
   diregangkan setinggi barisnya, lalu blok tombol didorong ke dasar. */
.game-grid { align-items: stretch; }

.game-grid .game-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.game-grid .game-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Blok bawah kartu didorong ke dasar. Kalau ada MAXWIN, dialah yang
   mengambil dorongan itu supaya ia menempel tepat di atas baris tombol
   dan tidak menyisakan celah di antara keduanya. */
.game-grid .card-actions { margin-top: auto; }
.game-grid .game-maxwin { margin-top: auto; }
.game-grid .game-maxwin + .card-actions { margin-top: 0; }

/* Tombol bertumpuk atas-bawah. Berdampingan memaksa kartu melebar, dan
   kartu yang lebar membuat thumbnail 200x200 diperbesar sampai buram. */
.card-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr;
  padding-top: 10px;
}

.card-actions .btn {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ==========================================================================
   THUMBNAIL TIDAK BOLEH DIPERBESAR
   ==========================================================================
   Berkas sumbernya 200x200 (dicek: 232 dari 278 contoh berkas). Sebelumnya
   kartu diregangkan mengikuti lebar kolom sehingga gambar tampil 225px -
   diperbesar 1,13x dan terlihat pecah. Kartu kini dibatasi selebar gambar
   aslinya dan dipusatkan di kolomnya, jadi gambarnya tidak pernah
   di-upscale. Di layar sempit kolomnya sudah lebih kecil dari 200px,
   sehingga aturan ini tidak berpengaruh di sana.

   Kalau nanti tersedia thumbnail beresolusi lebih tinggi, naikkan angka ini
   mengikuti ukuran berkas barunya. */
.game-grid { justify-items: center; }

.game-grid .game-card {
  width: 100%;
  max-width: 200px;
}

/* ==========================================================================
   JUMLAH HASIL
   ========================================================================== */

.game-grid .game-maxwin { margin-bottom: 0; }

.result-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 12px;
}

.result-meta #result-count {
  color: var(--hud-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-meta #active-filter-label {
  color: var(--hud-text-secondary);
  font-size: 12px;
}

/* ==========================================================================
   BAR "TAMPILKAN LEBIH BANYAK"
   ========================================================================== */

.game-load-more {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 30px;
}

.game-load-more__button {
  --chamfer: 14px;
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  min-width: 0;
  min-height: 52px;
  border: var(--hud-edge-strong) solid var(--hud-gold-edge-strong);
  border-radius: 0;
  background: linear-gradient(150deg, #16110a, #090c14);
  box-shadow: 0 0 18px rgba(var(--hud-gold-rgb), .16), 0 12px 28px rgba(0, 0, 0, .5);
  color: var(--hud-gold-label);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  clip-path: polygon(
    var(--chamfer) 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)),
    0 var(--chamfer)
  );
}

.game-load-more__button:hover:not(:disabled) {
  transform: none;
  border-color: var(--hud-gold-bright);
  box-shadow: 0 0 26px rgba(var(--hud-gold-rgb), .3), 0 12px 28px rgba(0, 0, 0, .5);
  filter: none;
}

/* Garis emas memanjang ke kiri dan kanan tombol, sejajar tengahnya. */
.game-load-more::before {
  position: absolute;
  top: 26px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hud-gold-edge) 16%, var(--hud-gold-edge) 84%, transparent);
  content: "";
  opacity: .75;
  pointer-events: none;
}

@media (max-width: 767px) {
  .game-load-more::before { display: none; }
  .game-load-more__button { min-height: 46px; font-size: 11px; letter-spacing: .1em; }
}

/* ==========================================================================
   BAR STATUS SISTEM
   ==========================================================================
   Lima sel berlabel dalam satu rangka emas, semuanya terlihat sekaligus.
   Teks berjalannya dihentikan di layar lebar: pada rancangan seluruh
   informasi tampil bersamaan, dan informasi yang bergerak lebih sulit
   dibaca daripada yang diam.
   ========================================================================== */

.score-notification {
  min-height: 66px;
  margin-bottom: 22px;
  border-color: var(--hud-gold-edge-strong);
  background: linear-gradient(150deg, #101725, #070a12);
  box-shadow: 0 0 18px rgba(var(--hud-gold-rgb), .12), 0 12px 28px rgba(0, 0, 0, .45);
}

.score-notification__icon {
  flex-basis: 62px;
  border-right: var(--hud-edge) solid var(--hud-gold-edge-strong);
  background: linear-gradient(160deg, rgba(var(--hud-gold-rgb), .18), rgba(var(--hud-gold-rgb), .05));
  color: var(--hud-gold-bright);
}

.score-notification__viewport { flex: 1 1 auto; min-width: 0; }

/* Isi bar diam dan dibagi rata; tidak ada marquee di layar lebar. */
.score-notification__content {
  display: flex;
  width: 100%;
  gap: 0;
  animation: none !important;
  transform: none !important;
}

.score-notification__duplicate { display: none !important; }

.score-notification__message {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: stretch;
}

/* -- satu sel ------------------------------------------------------------ */
.status-item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px;
  border-right: var(--hud-edge) solid rgba(var(--hud-gold-rgb), .16);
  white-space: normal;
}

.status-item:last-child { border-right: 0; }

.status-item__icon { flex: 0 0 18px; }

.status-item__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.status-item__title {
  overflow: hidden;
  color: var(--hud-gold-label);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-item__value {
  overflow: hidden;
  color: var(--hud-text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -- warna ikon dan nilai mengikuti peran -------------------------------- */
.status-item[data-status-tone="gold"] .status-item__icon { color: var(--hud-gold); }
.status-item[data-status-tone="gold"] .status-item__value { color: var(--hud-gold-bright); }

.status-item[data-status-tone="muted"] .status-item__icon { color: var(--hud-text-muted); }

/* ==========================================================================
   LAYAR MENENGAH
   ==========================================================================
   Tiga sel masih muat sampai layar cukup sempit, jadi yang disesuaikan
   hanya jaraknya.
   ========================================================================== */

@media (max-width: 1199px) {
  .status-item { padding: 0 11px; gap: 8px; }
}

@media (max-width: 767px) {
  .score-notification { min-height: 58px; margin-bottom: 16px; }
  .score-notification__icon { flex-basis: 44px; }
  .score-notification__message { min-height: 56px; }
  .status-item { padding: 0 9px; gap: 7px; }
  .status-item__icon { flex-basis: 15px; width: 15px; height: 15px; }
  .status-item__title { font-size: 8px; letter-spacing: .06em; }
  .status-item__value { font-size: 11px; }

  /* Di layar sempit tiga sel jadi terlalu sesak; selang pembaruan otomatis
     paling tidak mendesak, jadi ia yang disembunyikan. */
  .status-item[data-status-key="interval"] { display: none; }
}

/* ==========================================================================
   HERO DI LAYAR SEMPIT
   ==========================================================================
   Ruang di HP terbatas, sedangkan hero berisi judul panjang, deskripsi, dan
   form berisi tiga kolom. Kalau semuanya ditampilkan sekaligus, daftar game
   baru terlihat setelah menggulir jauh.
   ========================================================================== */

@media (max-width: 767px) {
  /* responsive.css mengunci batas bawah judul di 32px, sehingga setelan WLB
     yang lebih kecil dari itu diabaikan. Batasnya diturunkan supaya angka di
     panel admin benar-benar berlaku. */
  .hero h1 { font-size: clamp(20px, var(--hero-title-size-mobile, 26px), 44px); }

  .hero-lead {
    margin: 12px 0 14px;
    font-size: 12.5px;
    line-height: 1.6;
  }

  .hero-callout { margin-bottom: 14px; font-size: 10px; }

  .hero { min-height: 0; padding-top: 26px; }
  /* Padding kotaknya sudah tidak ada; lihat blok LATAR HERO. */
}

/* ==========================================================================
   FORM HERO YANG DILIPAT
   ==========================================================================
   Di layar sempit form disembunyikan sampai tombol pertama ditekan, jadi
   yang terlihat lebih dulu hanya ajakan bertindak.

   Kelas "is-collapsible" dipasang JavaScript, bukan ditulis di HTML. Kalau
   JavaScript gagal dimuat, kelas itu tidak pernah ada dan formnya tampil
   utuh - jadi tidak ada jalan buntu.
   ========================================================================== */

@media (max-width: 767px) {
  .generator-card.is-collapsible:not(.is-expanded) .form-grid,
  .generator-card.is-collapsible:not(.is-expanded) .form-status-row {
    display: none;
  }

  /* Kolomnya ditumpuk satu per satu; dua kolom di layar sempit membuat
     "Nominal Deposit" terpotong. */
  .generator-card.is-expanded .form-grid { grid-template-columns: 1fr; }

  .generator-card.is-collapsible .btn-generate { margin-top: 0; }
}

/* Petunjuk kecil di bawah tombol saat form masih terlipat. */
.generator-hint {
  margin: 8px 0 0;
  color: var(--hud-text-muted);
  font-size: 10px;
  text-align: center;
}

.generator-hint[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .generator-card.is-expanded .form-grid { animation: heroFormIn 260ms var(--hud-ease) both; }
}

@keyframes heroFormIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   TOMBOL POLA MAIN — biru sistem
   ==========================================================================
   Dua tombol di kartu tadinya sama-sama emas, jadi tidak ada yang terlihat
   lebih penting padahal maksudnya berbeda:

     MAIN SEKARANG  aksi utama, membawa member keluar untuk bermain -> emas
     POLA MAIN      aksi informasi, menampilkan data                -> biru

   Biru dipilih karena di sistem warna ini biru sudah berarti data, koneksi,
   dan analisis - persis maksud tombolnya. Jadi ini bukan warna baru,
   melainkan memakai arti yang sudah ada. Dibuat bergaris tepi, bukan berisi
   penuh, supaya emas tetap jadi warna utama halaman.

   Hanya berlaku untuk tombol di kartu game (.generate-game). Tombol di
   dalam pop-up memakai .btn-generate dan tetap emas.
   ========================================================================== */

.generate-game {
  border: var(--hud-edge-strong) solid var(--fx-blue, var(--fx-blue));
  background: rgba(var(--hud-blue-rgb), .10);
  color: var(--fx-blue-light, var(--fx-blue-light));
  box-shadow: none;
  text-shadow: none;
}

/* Kilau emas dimatikan di tombol ini - warnanya bukan emas lagi. */
.generate-game::before { display: none; }

@media (hover: hover) and (pointer: fine) {
  .generate-game:hover:not(:disabled) {
    border-color: var(--hud-blue-bright, var(--hud-blue-bright));
    background: rgba(var(--hud-blue-rgb), .20);
    box-shadow: 0 0 14px rgba(var(--hud-blue-rgb), .28);
  }

  /* Aturan lama menyalakan sapuan emas saat hover; tidak berlaku lagi. */
  .generate-game:hover:not(:disabled)::before { animation: none; opacity: 0; }
}

.generate-game:focus-visible {
  outline: 2px solid var(--hud-blue-bright, var(--hud-blue-bright));
  outline-offset: 2px;
}

/* Tombol MAIN SEKARANG sudah tidak ada di kartu - digantikan tautan pada
   thumbnail - jadi aturan gayanya ikut dibuang. */

/* ==========================================================================
   THUMBNAIL SEBAGAI TAUTAN MAIN
   ==========================================================================
   Menekan gambar sama dengan menekan MAIN SEKARANG. Di layar sempit tombol
   MAIN SEKARANG disembunyikan supaya kartunya pendek dan lebih banyak game
   muat dalam satu layar; gambarnya yang menggantikan.

   Di desktop keduanya tetap ada: gambar sebagai jalan pintas, tombol sebagai
   penanda yang jelas.
   ========================================================================== */

.game-thumbnail { position: relative; }

.game-thumbnail__play {
  position: absolute;
  z-index: 3;
  display: grid;
  inset: 0;
  place-items: center;
  padding: 0;
  border: 0;
  background: rgba(4, 8, 16, 0);
  text-decoration: none;
  transition: background var(--hud-hover) ease;
}

/* Pil "MAIN": tepi biru polos, teks dan ikon emas. Tepi gradasi emas-biru
   sebelumnya bertabrakan dengan rangka emas kartu yang juga menyala saat
   disorot - dua emas berebut perhatian. Satu warna tepi saja lebih tenang. */
.game-thumbnail__play-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--fx-blue, var(--fx-blue));
  border-radius: 999px;
  background: rgba(8, 12, 20, .88);
  color: var(--hud-gold-label);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--hud-hover) ease, transform var(--hud-hover) var(--hud-ease);
}

.game-thumbnail__play-pill svg { color: var(--hud-gold-bright); }

.game-thumbnail__play:focus-visible {
  outline: 2px solid var(--hud-blue-bright);
  outline-offset: -3px;
}

.game-thumbnail__play:focus-visible .game-thumbnail__play-pill { opacity: 1; transform: scale(1); }

/* -- desktop: muncul saat disorot -------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .game-card:hover .game-thumbnail__play { background: rgba(4, 8, 16, .5); }
  .game-card:hover .game-thumbnail__play-pill { opacity: 1; transform: scale(1); }
}

/* -- layar sempit: ikon selalu terlihat, tombol MAIN SEKARANG dilepas --- */
@media (max-width: 767px) {
  /* Tidak ada hover di layar sentuh, jadi ikonnya harus terlihat sejak awal
     supaya member tahu gambarnya bisa ditekan. Dibuat kecil di pojok agar
     tidak menutupi gambar. */
  /* Layar sentuh tidak punya hover. Kalau pilnya ikut disembunyikan,
     tidak ada satu pun jalan bermain yang terlihat - tombol MAIN SEKARANG
     sudah dibuang. Jadi di sini pilnya tetap tampil, tapi ikut dipusatkan
     seperti di desktop. */
  .game-thumbnail__play-pill {
    gap: 5px;
    padding: 6px 11px;
    font-size: 9px;
    letter-spacing: .08em;
    opacity: 1;
    transform: none;
  }

  .game-thumbnail__play-pill svg { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-thumbnail__play,
  .game-thumbnail__play-pill { transition: none; }
}

/* ==========================================================================
   SOROTAN KARTU YANG SELARAS
   ==========================================================================
   Sebelumnya sorotan menumpuk tiga efek emas sekaligus: rangka kartu jadi
   emas terang (hud.css), bayangan emas (components.css), dan pil MAIN yang
   juga bergaris emas. Hasilnya ramai dan tidak ada yang jadi fokus.

   Sekarang satu keadaan sorot menggerakkan semuanya bersama-sama:
   rangka emas menyala, POLA MAIN ikut menyala biru, dan pil MAIN muncul.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  /* Bayangan emas berlapis dari components.css dihilangkan; cukup satu
     bayangan kedalaman biasa supaya rangka emasnya yang terbaca. */
  .game-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hud-shadow);
  }

  /* POLA MAIN menyala bersama rangkanya, bukan menunggu disorot sendiri,
     supaya seluruh kartu terbaca sebagai satu keadaan. */
  .game-card:hover .generate-game {
    border-color: var(--hud-blue-bright);
    background: rgba(var(--hud-blue-rgb), .18);
    box-shadow: 0 0 12px rgba(var(--hud-blue-rgb), .24);
  }
}

/* Bayangan emas dibuang di mana pun ia masih menempel pada kartu: rangka
   emasnya sendiri sudah cukup menandai keadaan disorot. */
.game-card,
.game-card:hover,
.game-grid .game-card:hover { box-shadow: var(--hud-shadow); }

/* ==========================================================================
   DUA JALAN BERMAIN, SATU PER JENIS LAYAR
   ==========================================================================
   Desktop punya hover, jadi pil MAIN di atas foto sudah cukup dan baris
   aksinya tetap ringkas. Layar sentuh tidak punya hover, jadi di sana
   tombol MAIN SEKARANG yang dipakai dan fotonya dibiarkan bersih.
   ========================================================================== */

/* Desktop: tombolnya ada di DOM tapi tidak ditampilkan. */
.card-actions .play-game { display: none; }

@media (max-width: 767px) {
  .card-actions .play-game {
    display: inline-flex;
    border-color: transparent;
    background: var(--hud-gold-metal);
    color: var(--hud-gold-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px rgba(0, 0, 0, .3);
  }

  /* Tautan pada foto dilepas seluruhnya di layar sentuh - bukan sekadar
     disembunyikan - supaya tidak ada sasaran tak terlihat yang membawa
     member keluar halaman saat ia hanya bermaksud menggulir. Sekaligus
     mengeluarkannya dari urutan fokus dan pembaca layar. */
  .game-thumbnail__play { display: none; }
}

/* ==========================================================================
   JARAK POSISI MENGIKUTI LEBAR LAYAR
   ==========================================================================
   Kartu paling pinggir berada di --side-x + setengah lebarnya dari titik
   tengah. Kalau angka itu melebihi setengah ruang yang tersedia, kartunya
   keluar layar. Jadi jaraknya dikecilkan bertahap, dan di layar sempit
   kartu pinggir memang tidak ditampilkan sama sekali (diatur JavaScript).
   ========================================================================== */

/* Di bawah 1280px ruangnya tidak cukup untuk lima kartu tanpa saling
   menimpa. Kartunya dikecilkan lebih dulu supaya jaraknya tetap muat. */
@media (max-width: 1279px) {
  .provider-list { --near-x: 190px; --side-x: 340px; }
  .provider-list .provider-button { width: 176px; height: 104px; }
}

@media (max-width: 1023px) {
  .provider-list { --near-x: 155px; --side-x: 265px; }
  .provider-list .provider-button { width: 176px; height: 104px; }
}

@media (max-width: 767px) {
  /* Kartu tetangga sengaja dibiarkan terpotong di tepi panggung - itulah
     efek "peek" pada rancangan mobile. Pemotongan juga menjamin tidak ada
     luapan mendatar berapa pun lebar layarnya. */
  .provider-list {
    --near-x: 112px;
    height: 150px;
    overflow: hidden;
  }

  .provider-list .provider-button { width: 150px; height: 90px; }

  /* Kartu tengah tetap paling menonjol, tapi tidak sebesar di desktop
     supaya tetangganya masih terbaca di layar sempit. */
  .provider-list .provider-button[data-slot="center"] { transform: translateX(0) scale(1.1); }
  .provider-list .provider-button[data-slot="near-left"] { transform: translateX(calc(var(--near-x) * -1)) scale(.86); }
  .provider-list .provider-button[data-slot="near-right"] { transform: translateX(var(--near-x)) scale(.86); }
}

/* Skala hover bawaan juga dimatikan di carousel - ia memperbesar lagi. */
.provider-list .provider-button:hover .provider-logo { transform: none; }

/* ==========================================================================
   KEPALA BAGIAN TANPA JUDUL
   ==========================================================================
   Judul "Pilih Provider" dibuang dari tampilan; keterangannya yang
   diperbesar. Elemennya tetap ada di DOM karena bagian ini memakai
   aria-labelledby ke judul itu - menghapusnya akan membuat bagian ini
   kehilangan nama bagi pembaca layar.
   ========================================================================== */

.provider-selection__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.provider-selection__help {
  max-width: 720px;
  margin: 0 auto;
  color: var(--hud-text);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .provider-selection__help { font-size: 13px; }
}

/* Kepala bagian provider tidak lagi perlu ruang atas: penghitung yang dulu
   diposisikan absolut di sini sudah pindah ke dalam tombol Semua Provider. */

/* ==========================================================================
   NAMA PROVIDER
   ==========================================================================
   Logo saja tidak cukup: dengan 36 provider, orang harus menunggu carousel
   berputar penuh untuk tahu isinya. Dua penambahan, keduanya DIAM:

     1. nama provider yang sedang di tengah, di bawah carousel
     2. deretan seluruh nama yang bisa ditekan untuk melompat
   ========================================================================== */

.provider-active-name {
  margin: 0 0 12px;
  color: var(--hud-gold-label);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  min-height: 1.2em;
}

/* -- deretan nama -------------------------------------------------------- */
/* Deretan berjalan pelan terus-menerus.

   Kedua tepinya dilembutkan dengan mask supaya nama tidak terpotong tajam
   di ujung, melainkan seolah masuk dan keluar dari badan halaman. Mask
   dipakai, bukan gradien yang ditumpuk di atasnya, karena gradien butuh
   warna latar tetap - sedangkan di sini latarnya bergambar. */
.provider-name-strip {
  display: flex;
  gap: 8px;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 2px 0 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  cursor: grab;

  /* Penggulir tipis: gerakannya memang sudah menjadi petunjuk, tapi
     penggulir membuat jelas bahwa deretannya juga bisa digeser sendiri. */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--hud-gold-rgb), .55) transparent;

  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0, #000 5%, #000 95%, transparent 100%);
}

.provider-name-strip::-webkit-scrollbar { height: 4px; }

.provider-name-strip::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
}

.provider-name-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--hud-gold-rgb), .55);
}

.provider-name-strip::-webkit-scrollbar-thumb:hover { background: var(--hud-gold); }
.provider-name-strip.is-dragging { cursor: grabbing; }

/* Sudut hanya sedikit dibulatkan - bentuk kapsul terasa asing di antara
   panel dan tombol lain yang semuanya bersudut.
   clip-path sengaja TIDAK dipakai di sini: ia akan ikut memotong sudut
   menyala di bawah, karena clip-path juga berlaku untuk pseudo-element. */
.provider-name-chip {
  position: relative;
  flex: 0 0 auto;
  padding: 7px 14px;
  border: var(--hud-edge) solid rgba(var(--hud-blue-rgb), .38);
  border-radius: 4px;
  background: rgba(var(--hud-blue-rgb), .08);
  color: var(--hud-gold-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--hud-hover) ease, border-color var(--hud-hover) ease, background var(--hud-hover) ease;
}

/* Chip tidak lagi menandai pilihan carousel. Penandanya sudah ada di kartu
   tengah berupa Corner Charge emas; menandai di dua tempat sekaligus hanya
   membuat mata bingung harus melihat ke mana. Birunya kini sekadar warna
   tepi untuk semua chip.

   Atribut aria-current tetap dipasang karena pernyataannya masih benar dan
   berguna bagi pembaca layar. */

@keyframes cornerCharge {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

.provider-name-chip:focus-visible {
  outline: 2px solid var(--hud-blue-bright);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .provider-name-chip:hover { border-color: var(--hud-gold-edge-strong); color: var(--hud-gold-text); }
}

@media (max-width: 767px) {
  .provider-active-name { font-size: 12px; margin-bottom: 10px; }
  .provider-name-strip { gap: 6px; margin-bottom: 14px; }
  .provider-name-chip { padding: 5px 10px; font-size: 10px; }
}

/* ==========================================================================
   RANGKA KARTU YANG BERJENJANG
   ==========================================================================
   Sebelumnya semua kartu memakai garis emas dengan ketebalan hampir sama,
   jadi kartu tengah kurang menonjol. Sekarang ketegasan garisnya mengikuti
   posisi: makin ke pinggir makin tipis dan redup.
   ========================================================================== */

.provider-list .provider-button[data-slot="side-left"],
.provider-list .provider-button[data-slot="side-right"] {
  border-width: 1px;
  border-color: rgba(var(--hud-gold-rgb), .2);
}

.provider-list .provider-button[data-slot="near-left"],
.provider-list .provider-button[data-slot="near-right"] {
  border-width: 1px;
  border-color: rgba(var(--hud-gold-rgb), .42);
}

/* Kartu tengah: garis emas terang plus cincin tipis di luarnya, sehingga
   terbaca sebagai rangka berlapis tanpa perlu elemen tambahan. */
/* Kartu tengah memakai biru, bukan emas. Emas tetap menjadi rangka dasar
   di kartu samping, sehingga biru berarti "yang sedang dipilih" - selaras
   dengan peran biru di seluruh halaman ini sebagai penanda sistem aktif.
   Cincinnya dibuat berlapis supaya tepinya terbaca jelas di layar terang
   maupun gelap. */
.provider-list .provider-button[data-slot="center"] {
  border-width: 2px;
  border-color: var(--hud-blue-bright);
  box-shadow:
    0 0 0 1px rgba(var(--hud-blue-rgb), .55),
    0 0 0 5px rgba(var(--hud-blue-rgb), .16),
    0 0 30px rgba(var(--hud-blue-rgb), .45),
    0 20px 40px rgba(0, 0, 0, .6);
}

/* Sapuan cahaya pada kartu tengah sudah DIBUANG. Dulu ia berkelebat sekali
   tiap kartu tengah berganti - dan karena carousel bisa digeser berkali-kali
   berturut-turut, kelebatannya beruntun dan justru terbaca sebagai kedipan.
   Penanda kartu tengah kini sepenuhnya dipegang tepi biru dan siku emasnya,
   yang keduanya diam. */

/* Pantulan lembut di bawah kartu tengah. */
.provider-carousel::after {
  bottom: 18px;
  width: min(300px, 46%);
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(var(--hud-blue-rgb), .3), transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .provider-list .provider-button[data-slot="center"]::after { animation: none; opacity: 0; }
}


/* ==========================================================================
   CORNER CHARGE PADA KARTU AKTIF
   ==========================================================================
   Empat sudut menyala emas, hanya di kartu yang sedang di tengah. Sama
   seperti pada chip nama: kalau semua kartu diberi sudut menyala, geraknya
   bertabrakan dengan carousel yang memang sudah berpindah-pindah.

   Kartu memakai clip-path chamfer, dan clip-path juga memotong
   pseudo-element - jadi sudutnya digambar sebagai lapisan tersendiri di
   dalam batas potongan, bukan menempel di tepi luar.
   ========================================================================== */

.provider-list .provider-button[data-slot="center"] .provider-corner {
  position: absolute;
  inset: 5px;
  pointer-events: none;
}

/* Siku emasnya DIAM. Dulu keempatnya berdenyut bergantian tiap 1,8 detik -
   empat titik berkedip di kartu yang sudah punya tepi biru menyala, dan
   kedipan itu justru mengalihkan perhatian dari logonya sendiri. */
.provider-corner i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--hud-gold-bright);
  filter: drop-shadow(0 0 5px rgba(var(--hud-gold-rgb), .85));
}

.provider-corner i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.provider-corner i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; animation-delay: .45s; }
.provider-corner i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; animation-delay: .9s; }
.provider-corner i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; animation-delay: 1.35s; }

/* Hanya kartu tengah yang menampilkannya. */
.provider-list .provider-button:not([data-slot="center"]) .provider-corner { display: none; }

@media (max-width: 767px) {
  .provider-corner i { width: 9px; height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .provider-corner i { animation: none; opacity: 1; }
}

/* ==========================================================================
   BAR STATUS — SUSUNAN BARU
   ==========================================================================
   Mengikuti susunan pada rancangan: tiap sel berisi ikon dalam lingkaran
   bertepi di kiri, lalu tiga baris teks di kanannya.

       [ ikon ]   JUDUL KECIL
                  Nilai Besar
                  keterangan

   Di layar sempit selnya ditumpuk ke bawah, satu baris penuh per sel,
   dipisah garis tipis - bukan dijejalkan mendatar sampai terpotong.
   ========================================================================== */

.score-notification { min-height: 84px; }

.score-notification__message { min-height: 82px; }

.status-item {
  gap: 14px;
  padding: 0 20px;
  align-items: center;
}

/* -- ikon dalam lingkaran ------------------------------------------------ */
.status-item__badge {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 1.5px solid var(--hud-gold-edge-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(var(--hud-gold-rgb), .16), rgba(8, 12, 20, .9) 70%);
  color: var(--hud-gold-bright);
}

/* Sel jadwal memakai biru, sesuai perannya sebagai penanda sistem berjalan. */
.status-item[data-status-tone="blue"] .status-item__badge {
  border-color: rgba(var(--hud-blue-rgb), .7);
  background: radial-gradient(circle at 50% 35%, rgba(var(--hud-blue-rgb), .2), rgba(8, 12, 20, .9) 70%);
  color: var(--hud-blue-bright);
}

/* -- tiga baris teks ----------------------------------------------------- */
.status-item__text { gap: 1px; }

.status-item__title {
  color: var(--hud-gold-label);
  font-size: 10px;
  letter-spacing: .09em;
}

.status-item[data-status-tone="blue"] .status-item__title { color: var(--hud-text); }

.status-item__value {
  color: var(--hud-text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
}

.status-item[data-status-tone="blue"] .status-item__value {
  color: var(--hud-blue-bright);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.status-item__sub {
  overflow: hidden;
  color: var(--hud-text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-item[data-status-tone="gold"] .status-item__sub { color: var(--hud-gold-text); }

/* ==========================================================================
   LAYAR MENENGAH
   ========================================================================== */

@media (max-width: 1199px) {
  .status-item { gap: 11px; padding: 0 13px; }
  .status-item__badge { width: 40px; height: 40px; flex-basis: 40px; }
  .status-item__badge svg { width: 17px; height: 17px; }
  .status-item__value { font-size: 14px; }
  .status-item[data-status-tone="blue"] .status-item__value { font-size: 17px; }
}

/* ==========================================================================
   LAYAR SEMPIT — SEL DITUMPUK
   ==========================================================================
   Tiga sel bersebelahan di layar 380px membuat tiap sel hanya selebar
   120px dan nilainya terpotong. Ditumpuk ke bawah, semuanya terbaca utuh
   dan tidak ada yang perlu disembunyikan.
   ========================================================================== */

@media (max-width: 767px) {
  .score-notification {
    display: block;
    height: auto;
    min-height: 0;
    padding: 4px 0;
  }

  .score-notification__viewport { width: 100%; }
  .score-notification__content { display: block; width: 100%; }

  .score-notification__message {
    display: block;
    width: 100%;
    min-height: 0;
  }

  .status-item {
    display: flex;
    width: 100%;
    padding: 11px 14px;
    border-right: 0;
    border-bottom: var(--hud-edge) solid rgba(var(--hud-gold-rgb), .16);
  }

  .status-item:last-child { border-bottom: 0; }

  /* Semua sel tampil; tidak ada lagi yang disembunyikan karena kesempitan. */
  .status-item[data-status-key="interval"] { display: flex; }

  .status-item__badge { width: 38px; height: 38px; flex-basis: 38px; }
  .status-item__badge svg { width: 16px; height: 16px; }
  .status-item__title { font-size: 9px; }
  .status-item__value { font-size: 15px; }
  .status-item[data-status-tone="blue"] .status-item__value { font-size: 18px; }
  .status-item__sub { font-size: 9px; }
}

/* ==========================================================================
   BAR STATUS — SIKU EMAS DAN LEBAR DIPUSATKAN
   ==========================================================================
   Siku emas dipasang supaya barnya serumpun dengan tombol Semua Provider
   dan kartu carousel. Tepinya sengaja TETAP emas, tidak biru: biru di
   halaman ini berarti "yang sedang dipilih", sedangkan bar ini panel
   informasi yang tidak bisa dipilih. Memakai biru di sini akan mengaburkan
   arti yang sudah dibangun di carousel.
   ========================================================================== */

.score-notification {
  position: relative;
  width: min(100%, 1080px);
  margin-inline: auto;
  border-color: var(--hud-gold-edge-strong);
  box-shadow: 0 0 20px rgba(var(--hud-gold-rgb), .14), 0 12px 28px rgba(0, 0, 0, .45);
}

.status-corner {
  display: block;
  inset: 6px 8px;
  z-index: 2;
}

.status-corner i {
  width: 13px;
  height: 13px;
  border-color: var(--hud-gold-bright);
}

@media (max-width: 767px) {
  .score-notification { width: 100%; }
  .status-corner { inset: 5px 6px; }
  .status-corner i { width: 10px; height: 10px; }
}

/* Ikon pemuat di ujung kiri bar dibuang di semua ukuran layar. Sejak tiap
   sel punya ikon lingkarannya sendiri, ikon itu jadi mengulang dan memakan
   ruang yang lebih berguna untuk isinya. */
.score-notification__icon { display: none; }

/* ==========================================================================
   LATAR HERO — KHUSUS MNJ
   ==========================================================================
   Dibatasi lewat [data-design="mnj"] pada elemen <html>. Berkas gaya ini
   dimuat semua WLB, jadi tanpa pembatas itu latarnya akan ikut terpasang
   di brand lain yang gambarnya sama sekali berbeda.

   Gambar ditaruh di lapisan tersendiri, bukan pada background elemen,
   supaya bisa diredupkan tanpa ikut meredupkan isinya.
   ========================================================================== */

/* Latarnya dipasang pada bagian hero-nya langsung, selebar layar - bukan di
   dalam kotak pembungkus. Peredupnya ditulis dalam satu deklarasi background
   bersama gambarnya: lapisan ber-z-index negatif akan jatuh di belakang
   background milik elemen induknya sendiri dan gambarnya jadi tidak terlihat
   sama sekali - persis yang dulu terjadi di bagian daftar game. */
[data-design="mnj"] .hero {
  background:
    linear-gradient(100deg, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .8) 46%, rgba(5, 7, 13, .66) 100%),
    var(--mnj-bg-desktop, url("../uploads/member/wlb-1-hero-background.jpg")) center / cover no-repeat;
}

/* Kotak pembungkus judul dan gambar dibuang seluruhnya. Sebelumnya ada tiga
   kotak bertumpuk di bagian ini - .hero-grid, .ai-visual, dan .generator-card
   - masing-masing dengan tepi emas, sudut membulat, dan bayangannya sendiri.
   Yang disisakan hanya kartu form, karena kolom isian memang perlu terbaca
   sebagai satu kelompok. */
[data-design="mnj"] .hero-grid,
[data-design="mnj"] .ai-visual {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

[data-design="mnj"] .hero-grid::after,
[data-design="mnj"] .hero-grid::before { display: none; content: none; }

/* Jarak yang tadinya datang dari padding kotak diganti jarak antar kolom,
   supaya teks tidak menempel ke tepi layar. */
[data-design="mnj"] .hero-grid { gap: 0 34px; }

@media (max-width: 767px) {
  [data-design="mnj"] .hero {
    /* background-attachment tidak dipakai di ponsel; gambarnya ikut
       menggulir supaya tidak berkedip. */
    background:
      linear-gradient(180deg, rgba(5, 7, 13, .9) 0%, rgba(5, 7, 13, .84) 100%),
      var(--mnj-bg-mobile, var(--mnj-bg-desktop, url("../uploads/member/wlb-1-hero-background.jpg"))) center / cover no-repeat;
  }

  [data-design="mnj"] .hero-grid { gap: 0; }
}

/* ==========================================================================
   CAROUSEL TANPA KOTAK PEMBUNGKUS DI DESKTOP
   ==========================================================================
   components.css membungkus carousel dengan tepi, sudut membulat, dan
   bayangan. Kotak itu bertabrakan dengan kartu-kartu yang sudah punya
   rangkanya sendiri, dan membuat bagian ini terasa berat. Di layar sempit
   kotaknya dipertahankan karena di sana ia justru menahan kartu yang
   terpotong di tepi agar tetap terbaca sebagai satu kelompok.
   ========================================================================== */

@media (min-width: 768px) {
  .provider-carousel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* Garis sapuan dekoratif dari components.css ikut dimatikan; tanpa kotak
     pembungkus ia menggantung tanpa bentuk. */
  .provider-carousel::before { display: none; }
}

/* ==========================================================================
   MODAL HASIL LEBIH RINGKAS DI DESKTOP
   ==========================================================================
   modal.css melebarkan modal hasil sampai 940px di layar besar. Isinya -
   rentang bet, empat langkah pola, dan beberapa kartu rekomendasi - tidak
   membutuhkan selebar itu; hasilnya barisnya jadi renggang dan modalnya
   terasa mendominasi layar.
   ========================================================================== */

@media (min-width: 768px) {
  .result-modal { width: min(92vw, 700px); }
  .result-shell { padding: 22px 24px; }
}

/* ==========================================================================
   FOTO HERO TIDAK LAGI MEMBESAR SAAT LAYAR MENGECIL
   ==========================================================================
   Di bawah 1051px hero berpindah ke satu kolom, dan responsive.css membuat
   panel visualnya selebar wadah sampai 800px. Akibatnya foto yang di layar
   1455px hanya 496px justru melompat jadi 798px di layar 1045px - membesar
   60% justru ketika layarnya menyempit.

   Lebarnya kini dibatasi supaya tetap sebanding dengan tata letak dua kolom.
   ========================================================================== */

@media (max-width: 1050px) {
  .ai-visual {
    width: min(100%, 460px);
    max-width: 460px;
  }
}

@media (max-width: 767px) {
  .ai-visual { width: min(100%, 340px); max-width: 340px; }
}

/* ==========================================================================
   LATAR DI BAGIAN DAFTAR GAME
   ==========================================================================
   Memakai gambar latar yang sama dengan hero supaya kedua bagian terasa
   satu halaman, dan kotak pembungkus daftar game dibuang - dengan latar
   bergambar, kotak itu justru menutupi gambarnya.
   ========================================================================== */

/* Gambar dan peredamnya ditaruh dalam SATU deklarasi background, bukan dua
   pseudo-element ber-z-index negatif.

   Percobaan pertama memakai pseudo-element dan hasilnya gambarnya tidak
   terlihat sama sekali, karena tiga lapisan gelap menumpuk: opasitas gambar
   yang terlalu rendah, peredam di atasnya, dan - yang paling menentukan -
   .games-section punya gradien latarnya sendiri dari style.css. Anak
   ber-z-index negatif berada DI BELAKANG latar elemen induknya, jadi
   gambarnya tertutup rapat.

   Dengan satu deklarasi, peredam dan gambar berada di tumpukan yang sama
   dan urutannya pasti. */
[data-design="mnj"] .games-section {
  position: relative;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, .62) 0%, rgba(5, 7, 13, .78) 100%),
    var(--mnj-bg-desktop, url("../uploads/member/wlb-1-hero-background.jpg")) center / cover no-repeat fixed;
}

@media (max-width: 767px) {
  /* background-attachment fixed berat di ponsel dan sering menimbulkan
     kedipan saat menggulir, jadi gambarnya dibuat ikut menggulir. */
  [data-design="mnj"] .games-section {
    background:
      linear-gradient(180deg, rgba(5, 7, 13, .68) 0%, rgba(5, 7, 13, .82) 100%),
      var(--mnj-bg-mobile, var(--mnj-bg-desktop, url("../uploads/member/wlb-1-hero-background.jpg"))) center / cover no-repeat;
  }
}

/* Kotak pembungkus daftar game dibuang. */
.game-results {
  padding-block: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.game-results::before { display: none; }

/* ==========================================================================
   TEPI PENCARIAN DAN DERETAN NAMA DIPERJELAS
   ========================================================================== */

.filter-bar .search-box {
  border-width: var(--hud-edge-strong);
  border-color: rgba(var(--hud-gold-rgb), .6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
}

.filter-bar .search-box:focus-within {
  border-color: var(--hud-blue-bright);
  box-shadow: 0 0 0 1px rgba(var(--hud-blue-rgb), .45), var(--hud-shadow-blue);
}

.filter-controls select {
  border-width: var(--hud-edge-strong);
  border-color: rgba(var(--hud-gold-rgb), .5);
}

/* Deretan nama provider: tepinya dinaikkan dari .38 ke .6 supaya batas tiap
   nama terbaca jelas di atas latar bergambar. */
.provider-name-chip {
  border-width: 1.5px;
  border-color: rgba(var(--hud-blue-rgb), .6);
  background: rgba(8, 14, 26, .78);
}

@media (hover: hover) and (pointer: fine) {
  .provider-name-chip:hover {
    border-color: var(--hud-blue-bright);
    background: rgba(var(--hud-blue-rgb), .18);
    color: var(--hud-gold-bright);
  }
}

/* ==========================================================================
   KOTAK PENCARIAN TIDAK LAGI MEMBENGKAK DI LAYAR SEMPIT
   ==========================================================================
   responsive.css mengubah .filter-bar menjadi kolom di bawah 1051px. Pada
   susunan kolom, flex-basis mengatur TINGGI, bukan lebar - sehingga
   "flex: 1 1 420px" yang ditulis untuk susunan mendatar membuat kotak
   pencarian menjadi setinggi 420px. Itulah sebabnya ia justru terlihat
   membesar ketika layarnya menyempit.
   ========================================================================== */

@media (max-width: 1050px) {
  .filter-bar .search-box {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
  }
}

/* ==========================================================================
   RINGKASAN KONEKSI DI ATAS DAFTAR GAME
   ==========================================================================
   Menggantikan modal pola pada alur hero. Tujuan tombol HUBUNGKAN adalah
   menghubungkan ID; setelah terhubung, yang berguna adalah daftar game yang
   tersaring - bukan dialog yang menutupi layar dan harus ditutup dulu.

   Rentang bet tetap ditampilkan di sini karena angka itu dihitung dari
   nominal deposit yang dimasukkan member; membuangnya berarti menyembunyikan
   satu-satunya keterangan di modal lama yang masih relevan di tahap ini.
   ========================================================================== */

.connect-summary {
  --chamfer: var(--hud-chamfer-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 11px 16px;
  border: var(--hud-edge-strong) solid rgba(57, 229, 140, .45);
  background: linear-gradient(145deg, rgba(10, 26, 20, .92), rgba(8, 12, 20, .92));
  box-shadow: 0 0 18px rgba(57, 229, 140, .12);
  clip-path: polygon(
    var(--chamfer) 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)),
    0 var(--chamfer)
  );
}

.connect-summary[hidden] { display: none; }

.connect-summary__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--hud-green);
  box-shadow: 0 0 9px rgba(57, 229, 140, .85);
}

.connect-summary__text {
  flex: 1 1 auto;
  margin: 0;
  color: var(--hud-text-secondary);
  font-size: 12px;
}

.connect-summary__text strong { color: var(--hud-green); font-weight: 800; }

.connect-summary__bet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-left: 16px;
  border-left: var(--hud-edge) solid rgba(var(--hud-gold-rgb), .3);
  color: var(--hud-text-muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.connect-summary__bet[hidden] { display: none; }
.connect-summary__bet strong { color: var(--hud-gold-bright); font-size: 13px; letter-spacing: 0; }

.connect-summary__close {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--hud-text-muted);
  cursor: pointer;
}

@media (max-width: 767px) {
  .connect-summary { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .connect-summary__text { flex: 1 1 100%; font-size: 11px; }
  .connect-summary__bet { padding-left: 0; border-left: 0; font-size: 10px; }
  .connect-summary__close { margin-left: auto; }
}

/* ==========================================================================
   DUA AKSI MUNCUL BERSAMAAN SAAT KARTU DISOROT
   ==========================================================================
   Sebelumnya sorotan hanya memunculkan MAIN, sehingga pola mainnya seolah
   tidak ada - padahal justru itu isi utama halaman ini. Sekarang MAIN dan
   POLA MAIN muncul bertumpuk di atas gambar.

   Tombol POLA MAIN di baris aksi disembunyikan di desktop agar tidak
   berganda; di layar sentuh ia tetap dipakai karena di sana tidak ada hover.
   ========================================================================== */

.game-thumbnail__pattern {
  position: absolute;
  z-index: 4;
  top: 58%;
  left: 50%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity var(--hud-hover) ease, transform var(--hud-hover) var(--hud-ease);
}

.game-thumbnail__pattern-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 1.5px solid rgba(var(--hud-blue-rgb), .75);
  border-radius: 4px;
  background: rgba(8, 14, 26, .9);
  color: var(--hud-gold-label);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  white-space: nowrap;
}

/* Tombol MAIN digeser ke atas supaya keduanya tersusun rapi. */
.game-thumbnail__play { align-items: start; padding-top: 26%; }

/* Lebar layar ikut disyaratkan, bukan hanya kemampuan hover. Peramban
   desktop yang jendelanya dikecilkan tetap melaporkan hover: hover, dan
   tanpa syarat lebar, tombol POLA MAIN di baris aksi ikut hilang di layar
   sempit padahal lapisan sorotnya tidak dipakai di sana. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .game-card:hover .game-thumbnail__pattern { opacity: 1; transform: translate(-50%, -50%) scale(1); }

  .game-card:hover .game-thumbnail__pattern-pill {
    border-color: var(--hud-blue-bright);
    background: rgba(var(--hud-blue-rgb), .22);
  }

  /* Di desktop aksinya sudah lengkap pada lapisan sorot. */
  .card-actions .generate-game { display: none; }
  .game-grid .card-actions { padding-top: 0; }
}

.game-thumbnail__pattern:focus-visible { outline: 2px solid var(--hud-blue-bright); outline-offset: 2px; }
.game-thumbnail__pattern:focus-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Layar sentuh: lapisan sorot tidak dipakai sama sekali. */
@media (max-width: 767px) {
  .game-thumbnail__pattern { display: none; }
  .game-thumbnail__play { align-items: center; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .game-thumbnail__pattern { transition: none; }
}

/* ==========================================================================
   PETUNJUK UNTUK MEMBER
   ==========================================================================
   Keterangan bagian daftar game sebelumnya sr-only - hanya terbaca pembaca
   layar. Dijadikan terlihat karena inilah kalimat yang memberi tahu member
   bahwa pola tiap game dicek langsung dari kartunya.
   ========================================================================== */

[data-game-section-description] {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 4px;
  overflow: visible;
  clip-path: none;
  color: var(--hud-text-secondary);
  font-size: 12.5px;
  white-space: normal;
}

@media (max-width: 767px) {
  [data-game-section-description] { font-size: 11.5px; }
}

/* ==========================================================================
   CAROUSEL: SATU WARNA TEPI, HANYA KEPEKATANNYA YANG BERBEDA
   ==========================================================================
   Sebelumnya kartu samping bertepi emas dan kartu tengah biru - dua warna
   yang membuat deretannya terbaca sebagai dua jenis benda. Sekarang
   semuanya biru; yang membedakan hanya kepekatannya, jadi urutan
   perhatiannya langsung terbaca: makin ke pinggir makin surut.

   Siku sudut tetap emas. Emas kini menjadi satu-satunya penanda "yang
   sedang di tengah", tidak lagi bersaing dengan tepi.
   ========================================================================== */

.provider-list .provider-button[data-slot="side-left"],
.provider-list .provider-button[data-slot="side-right"] {
  border-width: 1px;
  border-color: rgba(var(--hud-blue-rgb), .22);
}

.provider-list .provider-button[data-slot="near-left"],
.provider-list .provider-button[data-slot="near-right"] {
  border-width: 1.5px;
  border-color: rgba(var(--hud-blue-rgb), .45);
  box-shadow: 0 0 14px rgba(var(--hud-blue-rgb), .12), 0 14px 30px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   TOMBOL PANAH: SETINGGI CAROUSEL, BUKAN LINGKARAN
   ========================================================================== */

.provider-carousel__nav {
  --chamfer: 10px;
  width: 46px;
  height: auto;
  flex: 0 0 46px;
  align-self: stretch;
  border: 1px solid rgba(var(--hud-blue-rgb), .3);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(10, 18, 32, .5), rgba(8, 12, 20, .78));
  box-shadow: none;
  color: var(--hud-blue-bright);
  clip-path: polygon(
    var(--chamfer) 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)),
    0 var(--chamfer)
  );
}

.provider-carousel__nav svg { width: 22px; height: 22px; }

@media (hover: hover) and (pointer: fine) {
  .provider-carousel__nav:not(:disabled):hover {
    border-color: var(--hud-blue-bright);
    background: linear-gradient(180deg, rgba(var(--hud-blue-rgb), .16), rgba(8, 12, 20, .8));
    box-shadow: 0 0 18px rgba(var(--hud-blue-rgb), .25);
  }
}

@media (max-width: 767px) {
  .provider-carousel__nav { width: 34px; flex-basis: 34px; --chamfer: 7px; }
  .provider-carousel__nav svg { width: 17px; height: 17px; }
}

/* Panah dikecilkan. Ukuran 22px terlalu berat untuk panel setinggi ini -
   panelnya sendiri sudah cukup menandai tempat menekan, jadi panahnya cukup
   menjadi penunjuk arah yang halus. Panelnya ikut dipersempit agar
   perbandingannya tetap seimbang. */
.provider-carousel__nav { width: 36px; flex-basis: 36px; }
.provider-carousel__nav svg { width: 13px; height: 13px; }
.provider-carousel__nav svg path { stroke-width: 2.6; }

/* Garis tipis di atas dan di bawah panah: penanda khas HUD yang membuat
   panel tegaknya terbaca sebagai kendali, bukan sekadar bilah kosong. */
.provider-carousel__nav::before,
.provider-carousel__nav::after {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--hud-blue-rgb), .5), transparent);
  content: "";
  transform: translateX(-50%);
}

.provider-carousel__nav::before { top: 22px; }
.provider-carousel__nav::after { bottom: 22px; }

@media (hover: hover) and (pointer: fine) {
  .provider-carousel__nav:not(:disabled):hover::before,
  .provider-carousel__nav:not(:disabled):hover::after {
    background: linear-gradient(90deg, transparent, var(--hud-blue-bright), transparent);
  }
}

@media (max-width: 767px) {
  .provider-carousel__nav { width: 28px; flex-basis: 28px; }
  .provider-carousel__nav svg { width: 11px; height: 11px; }
  .provider-carousel__nav::before { top: 16px; }
  .provider-carousel__nav::after { bottom: 16px; }
}

/* ==========================================================================
   MODAL KONFIRMASI KONEKSI
   ==========================================================================
   Muncul setelah ID terhubung. Perannya memberi kepastian, bukan menyaring
   daftar - perpindahan ke daftar game dilakukan lewat tombolnya sendiri.
   ========================================================================== */

.connect-modal::backdrop {
  background: rgba(3, 5, 10, .82);
  backdrop-filter: blur(3px);
}

.connect-shell {
  position: relative;
  width: min(94vw, 480px);
  padding: 30px 26px 26px;
  border: var(--hud-edge-strong) solid rgba(var(--hud-blue-rgb), .55);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--hud-blue-rgb), .14), transparent 60%),
    linear-gradient(180deg, rgba(10, 15, 26, .98), rgba(6, 9, 16, .99));
  box-shadow: var(--hud-shadow-blue), 0 24px 60px rgba(0, 0, 0, .6);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  text-align: center;
}

/* -- centang hijau ------------------------------------------------------- */
.connect-modal__check {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  place-items: center;
  border: 2px solid rgba(46, 204, 113, .7);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(46, 204, 113, .22), rgba(8, 12, 20, .9) 70%);
  color: #2ecc71;
  box-shadow: 0 0 18px rgba(46, 204, 113, .35);
}

.connect-modal h2 {
  margin: 0 0 10px;
  color: var(--hud-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.connect-modal h2 strong {
  color: var(--hud-gold-bright);
  word-break: break-word;
}

.connect-modal__scope {
  margin: 0 0 12px;
  color: var(--hud-text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.connect-modal__scope strong { color: var(--hud-blue-bright); }

.connect-modal__hint {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-left: 2px solid rgba(var(--hud-gold-rgb), .6);
  background: rgba(var(--hud-gold-rgb), .07);
  color: var(--hud-gold-text);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}

/* -- tiga game teratas --------------------------------------------------- */
.connect-modal__picks { margin-bottom: 18px; }

.connect-modal__picks-title {
  margin: 0 0 9px;
  color: var(--hud-gold-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}

.connect-modal__list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.connect-pick__button {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 8px 10px;
  border: 1.5px solid rgba(var(--hud-blue-rgb), .42);
  background: rgba(8, 14, 26, .8);
  cursor: pointer;
  gap: 11px;
  text-align: left;
}

.connect-pick__thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(var(--hud-blue-rgb), .35);
  object-fit: cover;
}

.connect-pick__text {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

.connect-pick__name {
  overflow: hidden;
  color: var(--hud-text);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-pick__value {
  color: var(--hud-blue-bright);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.connect-pick__cta {
  flex: 0 0 auto;
  color: var(--hud-gold-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

@media (hover: hover) and (pointer: fine) {
  .connect-pick__button:hover {
    border-color: var(--hud-blue-bright);
    background: rgba(var(--hud-blue-rgb), .14);
  }
}

.connect-modal__cta {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

@media (max-width: 480px) {
  .connect-shell { padding: 24px 16px 20px; }
  .connect-modal h2 { font-size: 15.5px; }
  .connect-modal__check { width: 54px; height: 54px; }
  .connect-pick__cta { display: none; }
}

/* ==========================================================================
   KOLOM NOMOR WHATSAPP
   ==========================================================================
   Kode negara dicetak permanen di kiri kolom supaya member tidak perlu
   mengetiknya dan tidak bisa salah memilih negara.
   ========================================================================== */

.phone-input {
  /* Tingginya dipatok sama dengan kolom lain. Tanpa ini tebal tepi
     pembungkus menumpuk di atas tinggi input di dalamnya, dan kolom ini
     berdiri 3px lebih jangkung daripada User ID di sebelahnya. */
  height: 40px;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  align-items: stretch;
  border: var(--hud-edge-strong) solid rgba(var(--hud-gold-rgb), .5);
  background: rgba(6, 10, 18, .9);
}

.phone-input:focus-within {
  border-color: var(--hud-blue-bright);
  box-shadow: 0 0 0 1px rgba(var(--hud-blue-rgb), .45), var(--hud-shadow-blue);
}

.field.has-error .phone-input {
  border-color: var(--hud-danger, #ff5f6d);
}

/* Bagian kode negara. Bisa ditekan seluruhnya - select-nya dibentang
   menutupi area ini, jadi bendera dan kode telepon ikut jadi sasaran klik
   tanpa perlu penangan tambahan. */
.phone-input__prefix {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 9px;
  border-right: 1px solid rgba(var(--hud-gold-rgb), .35);
  background: rgba(var(--hud-gold-rgb), .08);
  cursor: pointer;
  gap: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .phone-input__prefix:hover { background: rgba(var(--hud-gold-rgb), .16); }
}

/* Select-nya sendiri dibuat tak terlihat, bukan display:none - kalau
   disembunyikan sungguhan ia tidak bisa lagi ditekan maupun dijangkau
   keyboard, dan negaranya jadi tidak bisa diganti sama sekali. */
.phone-input__country {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  appearance: none;
  background: none;
  color: transparent;
  cursor: pointer;
  opacity: 0;
}

.phone-input__prefix:focus-within {
  background: rgba(var(--hud-blue-rgb), .18);
  outline: 1px solid var(--hud-blue-bright);
  outline-offset: -1px;
}

/* Panah kecil sebagai penanda bahwa bagian ini bisa dibuka. */
.phone-input__caret {
  flex: 0 0 auto;
  color: var(--hud-gold-label);
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
}

.phone-input__flag {
  display: block;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 2px;
}

.phone-input__code {
  color: var(--hud-gold-bright);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Kolomnya sendiri tidak lagi bertepi - tepinya sudah dipegang pembungkus,
   jadi kalau digambar dua kali garisnya terlihat dobel.
   Tinggi minimumnya juga dilepas: kalau input dalam dan pembungkusnya
   sama-sama memasangnya, tingginya jadi bertumpuk dengan tebal tepi dan
   kolom ini berdiri 3px lebih jangkung daripada kolom lain di sebelahnya. */
.phone-input input {
  min-width: 0;
  /* Tingginya dipatok mengikuti pembungkus. Aturan kolom bawaan memberi
     tinggi tetap 46px, dan itu tidak tertimpa oleh min-height maupun
     align-self: stretch - keduanya kalah oleh height yang eksplisit.
     Akibatnya input meluber sekitar 7px keluar pembungkus 40px dan teksnya
     duduk lebih tinggi daripada di kolom User ID.

     height:auto melepas tinggi tetap itu, lalu align-self:stretch membuat
     flexbox meregangkannya tepat sebesar kotak isi pembungkus - bukan
     height:100% yang ikut menghitung tebal tepi dan menyisakan selisih
     kurang dari satu piksel. */
  min-height: 0;
  height: auto;
  align-self: stretch;
  flex: 1 1 auto;
  border: 0;
  background: none;
  box-shadow: none;
}

.phone-input input:focus { box-shadow: none; }

/* ==========================================================================
   HERO DI MOBILE — SUSUNAN LEBIH RAPAT
   ==========================================================================
   Diukur di layar 390x844: judul 54px, deskripsi 100px, dan formnya baru
   mulai di y=582 sementara lipatannya di 563 - jadi form tidak pernah
   terlihat tanpa menggulir. Jarak antar bagian yang dirapatkan memberi
   ruang jauh lebih banyak daripada mengecilkan judul saja.
   ========================================================================== */

@media (max-width: 767px) {
  .hero-copy h1 { margin-bottom: 8px; line-height: 1.15; }
  .hero-lead { margin-bottom: 10px; line-height: 1.45; }

  .generator-card { padding: 14px 13px; gap: 10px; }
  .form-grid { gap: 10px; }
  .field label { margin-bottom: 4px; font-size: 10.5px; }
  .field input,
  .field select,
  .phone-input { min-height: 0; height: 38px; }
  .phone-input input { min-height: 0; }
  .phone-input__prefix { padding: 0 8px; gap: 6px; }
  .phone-input__code { font-size: 12px; }

  /* Baris status "AI POWERED" tidak menambah informasi di layar sempit dan
     memakan satu baris penuh di atas kolom pertama. */
  .form-status-row { margin-bottom: 2px; }
}

/* ==========================================================================
   TOMBOL HUBUNGKAN
   ==========================================================================
   Tepi kedua digambar dengan box-shadow berlapis, bukan pseudo-element:
   tombolnya memakai overflow:hidden untuk animasi kilau, jadi elemen semu
   yang keluar dari kotaknya akan terpotong. Box-shadow milik elemen sendiri
   tidak ikut terpotong oleh overflow-nya.

   Lapisannya: cincin gelap sebagai jeda, lalu cincin berwarna sebagai tepi
   kedua - itu yang membuat dua garisnya terbaca terpisah, bukan menempel.
   ========================================================================== */

[data-design="mnj"] #generator-form .btn-generate {
  /* Obsidian bertepi emas, bukan biru terang.
     Biru penuh membuat tombol ini bersaing dengan foto hero di sebelahnya -
     dua bidang terang berebut perhatian - dan warnanya menabrak emas yang
     menjadi bahasa "rangka" di seluruh halaman. Bidang gelap dengan tepi
     emas justru menonjol lebih tenang: matanya tertarik ke garis emas dan
     tulisannya, bukan ke bidang warna.

     Birunya tidak dibuang, hanya dipindah ke DALAM tombol sebagai pendar
     dari dasar - jadi tetap terbaca sebagai tombol "sistem", tapi tidak
     lagi mendominasi. */
  min-height: 52px;
  /* Tepi tetap ini adalah lapis dasar DI BAWAH cincin berputar. Dinaikkan
     dari 1px/.5 supaya bentuk tombolnya tetap tegas di layar redup, dan
     supaya tepinya tidak terlihat menipis di sisi yang sedang tidak
     tersorot kilau. */
  border: 1.5px solid rgba(var(--hud-gold-rgb), .66);
  /* Latarnya kini gelap saja. Pendar birunya dipindah ke ::before supaya bisa
     berdenyut dan menguat sendiri - kalau tetap menumpang di background, ia
     hanya bisa berganti nilai, tidak bisa dianimasikan halus. */
  background: linear-gradient(180deg, #101a2b 0%, #0a1220 52%, #06090f 100%);
  color: var(--hud-gold-label);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  box-shadow:
    /* pinggul dalam: satu garis terang di atas dan bayangan di bawah,
       memberi kesan permukaan logam yang dibentuk - bukan kotak datar */
    inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .22),
    inset 0 -1px 0 rgba(0, 0, 0, .6),
    inset 0 -16px 26px -18px rgba(var(--hud-blue-rgb), .75),
    0 12px 30px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    color .22s ease;
}

/* Ikon kiri-kanan ikut emas, tidak lagi putih di atas biru. */
[data-design="mnj"] #generator-form .btn-generate .ui-icon { color: var(--hud-gold-bright); }
[data-design="mnj"] #generator-form .btn-generate .spark-icon .ui-icon { color: var(--hud-gold-bright); }

/* Kilau bawaan dari animations.css berwarna putih, jadi tetap cocok di atas
   biru dan sengaja dibiarkan. */

/* Disorot: tepi emasnya menyala dan pendar biru dari dasar naik. Bidangnya
   TETAP gelap - yang berubah cuma cahayanya, seperti panel yang dialiri
   listrik. Mengganti seluruh latar saat disorot terasa seperti tombol
   berganti benda, bukan tombol yang menyala. */
@media (hover: hover) and (pointer: fine) {
  [data-design="mnj"] #generator-form .btn-generate:hover:not(:disabled) {
    border-color: var(--hud-gold-bright);
    background: linear-gradient(180deg, #16233a 0%, #0d1728 52%, #070b13 100%);
    color: var(--hud-gold-hot);
    box-shadow:
      inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .32),
      inset 0 -1px 0 rgba(0, 0, 0, .6),
      0 0 0 1px rgba(var(--hud-gold-rgb), .35),
      0 14px 34px rgba(0, 0, 0, .6),
      0 0 26px rgba(var(--hud-gold-rgb), .22);
  }
}

/* Ditekan: tombolnya duduk lebih dalam - garis terang di atas dibalik jadi
   bayangan, jadi terasa benar-benar tertekan ke dalam, bukan sekadar
   berganti warna. Dipakai juga di layar sentuh yang tidak punya hover. */
[data-design="mnj"] #generator-form .btn-generate:active:not(:disabled) {
  border-color: var(--hud-gold-hot);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .75),
    inset 0 -14px 24px -18px rgba(var(--hud-cyan-rgb), .7),
    0 4px 12px rgba(0, 0, 0, .5),
    0 0 18px rgba(var(--hud-gold-rgb), .3);
}

/* Fokus papan ketik memakai tampilan yang sama dengan hover, supaya tombolnya
   tetap terlihat aktif bagi yang tidak memakai tetikus. */
[data-design="mnj"] #generator-form .btn-generate:focus-visible {
  border-color: var(--hud-gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .32),
    inset 0 -18px 30px -18px rgba(var(--hud-cyan-rgb), .9),
    0 0 0 3px rgba(5, 8, 15, .95),
    0 0 0 4px rgba(var(--hud-gold-rgb), .6);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] #generator-form .btn-generate { transition: none; }
}


/* ==========================================================================
   KOLOM ISIAN DIPENDEKKAN
   ==========================================================================
   Kolom setinggi 46px terasa jangkung untuk form bertiga kolom, apalagi
   setelah kotak pembungkusnya dibuang dan tidak ada lagi bidang gelap yang
   menahannya secara visual.
   ========================================================================== */

[data-design="mnj"] #generator-form .field > input,
[data-design="mnj"] #generator-form .field > select {
  min-height: 40px;
  height: 40px;
  padding-block: 0;
}

@media (max-width: 767px) {
  [data-design="mnj"] #generator-form .field > input,
  [data-design="mnj"] #generator-form .field > select {
    min-height: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   SUSUNAN HERO — TEKS DI SAMPING FOTO, FORM DI BAWAH
   ==========================================================================
   Judul dan deskripsi berdampingan dengan visual RTP di baris pertama, lalu
   form membentang penuh di baris kedua. Sebelumnya form ikut menumpuk di
   kolom kiri bersama teks, sehingga lebarnya hanya separuh dan kolomnya
   terasa sesak.

   Formnya dipindah keluar dari .hero-copy di markup supaya bisa menempati
   barisnya sendiri; kalau tetap di dalam, ia terkurung pada sel yang sama
   dengan judul.
   ========================================================================== */

@media (min-width: 768px) {
  [data-design="mnj"] .hero-grid {
    display: grid;
    align-items: center;
    /* Foto menempati kolom kanan sepanjang dua baris, jadi form tetap
       berada di kolom kiri tepat di bawah deskripsi - tidak melebar sampai
       ke bawah foto. */
    /* Badge punya BARISNYA SENDIRI di paling atas.
       Sebelumnya .hero-live-status tidak diberi grid-area sama sekali,
       sehingga ia ditempatkan otomatis di sel 1/1 - sel yang sama dengan
       "copy". Akibatnya badge tergambar menimpa isi .hero-copy, dan yang
       paling sering tertimpa adalah teks ajakan di barisnya yang terbawah.

       Bug ini hanya muncul kalau badge DAN teks ajakan sama-sama dinyalakan
       dari panel, jadi lama tidak ketahuan: MNJ menyalakan teks ajakan
       dengan badge dimatikan, sehingga tidak ada yang bertabrakan di sana.

       Memberinya baris sendiri membuat tabrakan itu mustahil terjadi lagi
       berapa pun jumlah fitur yang dinyalakan - bukan sekadar digeser
       menjauh, yang akan kembali bertabrakan begitu teksnya memanjang. */
    grid-template-areas:
      "badge visual"
      "copy  visual"
      "form  visual";
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: start;
    gap: 18px 34px;
  }

  [data-design="mnj"] .hero-grid .hero-copy { grid-area: copy; }

  /* justify-self: start menahan badge selebar isinya saja. Tanpa itu ia
     memuai selebar kolom dan latar pilnya ikut melar sampai ke tengah
     halaman. */
  [data-design="mnj"] .hero-grid .hero-live-status {
    grid-area: badge;
    justify-self: start;
  }

  /* Baris badge tidak menyisakan jarak saat badge dimatikan dari panel.
     :empty tidak bisa dipakai - elemennya tetap berisi ikon titik walau
     disembunyikan - jadi yang diperiksa atribut hidden, yang memang dipasang
     settings.js ketika badge dinonaktifkan. */
  [data-design="mnj"] .hero-grid .hero-live-status[hidden] { display: none; }

  [data-design="mnj"] .hero-grid .ai-visual {
    grid-area: visual;
    justify-self: end;
    /* Diselaraskan ke tengah kolomnya sendiri supaya tidak menggantung di
       atas ketika form membuat kolom kiri lebih tinggi. */
    align-self: center;
  }

  [data-design="mnj"] .hero-grid .generator-card {
    grid-area: form;
    width: 100%;
  }
}

@media (max-width: 767px) {
  [data-design="mnj"] .hero-grid { display: grid; grid-template-columns: 100%; gap: 14px; }
}

/* ==========================================================================
   TIGA BARIS ISIAN
   ==========================================================================
   User ID, WhatsApp, dan Provider masing-masing satu baris penuh. Dua kolom
   berdampingan membuat User ID dan nomor WhatsApp sama-sama sempit, padahal
   nomor telepon justru butuh ruang paling lebar.
   ========================================================================== */

[data-design="mnj"] #generator-form .form-grid {
  grid-template-columns: 100%;
  gap: 11px;
}

/* ==========================================================================
   KOLOM WHATSAPP DISAMAKAN DENGAN USER ID
   ==========================================================================
   Sebelumnya kolom ini bertepi emas tebal dan bersudut siku, sementara User
   ID di atasnya bertepi abu tipis dengan sudut membulat 10px - dua bentuk
   yang jelas berbeda dalam satu form.
   ========================================================================== */

.phone-input {
  border: var(--hud-edge) solid var(--mnj-field-edge);
  border-radius: 10px;
  background: rgba(7, 11, 20, .74);
}

.phone-input:focus-within {
  border-color: var(--hud-blue-bright);
  box-shadow: 0 0 0 1px rgba(var(--hud-blue-rgb), .45);
}

/* Pemisah kode negara ikut diredupkan supaya tidak lebih tegas daripada
   tepi kolomnya sendiri. */
.phone-input__prefix {
  border-right-color: var(--mnj-field-edge);
  border-radius: 10px 0 0 10px;
  background: rgba(255, 255, 255, .04);
}

@media (hover: hover) and (pointer: fine) {
  .phone-input__prefix:hover { background: rgba(255, 255, 255, .08); }
}

.phone-input__prefix:focus-within {
  background: rgba(var(--hud-blue-rgb), .16);
  outline: none;
}

.phone-input__code { color: var(--hud-text); font-weight: 700; }


/* ==========================================================================
   TEPI KOLOM ISIAN — KUNING, MERAH SAAT SALAH
   ==========================================================================
   Warnanya ditaruh di satu variabel supaya kolom biasa dan kolom telepon
   tidak pernah berbeda: kolom telepon tepinya ada di pembungkus, bukan di
   input-nya, jadi tanpa variabel bersama keduanya gampang lepas sinkron.
   ========================================================================== */

[data-design="mnj"] {
  --mnj-field-edge: rgba(var(--hud-gold-rgb), .55);
  --mnj-field-edge-error: #ff6b6b;
}

[data-design="mnj"] #generator-form .field > input,
[data-design="mnj"] #generator-form .field > select {
  border-color: var(--mnj-field-edge);
}

/* Keadaan salah. generator.css sudah memerahkan input dan select, tapi
   warnanya lebih pucat dan tidak menyentuh kolom telepon sama sekali -
   di sana tepinya milik pembungkus, bukan input di dalamnya. */
[data-design="mnj"] #generator-form .field.has-error > input,
[data-design="mnj"] #generator-form .field.has-error > select,
[data-design="mnj"] #generator-form .field.has-error .phone-input {
  border-color: var(--mnj-field-edge-error);
  box-shadow: 0 0 0 1px rgba(255, 107, 107, .35);
}

[data-design="mnj"] #generator-form .field.has-error .phone-input__prefix {
  border-right-color: var(--mnj-field-edge-error);
}

/* Fokus tetap biru dan menang atas keduanya - saat sedang diperbaiki,
   yang perlu terlihat adalah kolom mana yang sedang diketik. */
[data-design="mnj"] #generator-form .field > input:focus,
[data-design="mnj"] #generator-form .field > select:focus,
[data-design="mnj"] #generator-form .phone-input:focus-within {
  border-color: var(--hud-blue-bright);
}

/* ==========================================================================
   BARIS RINGKASAN DI ATAS DAFTAR GAME
   ==========================================================================
   Judul kelompok provider dibuang karena isinya persis sama dengan baris
   ini dan hanya berjarak sekitar 30px. Yang tersisa dirapikan supaya berdiri
   sendiri dengan jelas: jumlah permainan sebagai angka yang menonjol, nama
   provider sebagai keterangan di sebelahnya, dipisah garis tipis dari kartu
   di bawahnya.
   ========================================================================== */

[data-design="mnj"] .result-meta {
  display: flex;
  align-items: baseline;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(var(--hud-gold-rgb), .28);
  margin-bottom: 15px;
  gap: 9px;
}

[data-design="mnj"] .result-meta #result-count {
  color: var(--hud-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -.01em;
}

[data-design="mnj"] .result-meta #active-filter-label {
  overflow: hidden;
  color: var(--hud-gold-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Garis aksen pendek sebagai pemisah antara angka dan nama provider. */
[data-design="mnj"] .result-meta #result-count::after {
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-left: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--hud-gold-bright), transparent);
  content: "";
  vertical-align: middle;
}

@media (max-width: 767px) {
  [data-design="mnj"] .result-meta { margin-bottom: 12px; gap: 7px; }
  [data-design="mnj"] .result-meta #result-count { font-size: 13.5px; }
  [data-design="mnj"] .result-meta #active-filter-label { font-size: 10px; }
}

/* ==========================================================================
   JALUR SIRKUIT DI TEPI BAWAH HEADER
   ==========================================================================
   Tiga lapisan: jalur tembaga bergaya PCB, bantalan sambungan yang
   berdenyut, dan LED yang meluncur di sepanjang jalur dengan ekor komet.

   Bentuk jalurnya dibangun di assets/js/circuit-edge.js karena
   offset-path memakai koordinat piksel dan tidak ikut meregang bersama
   lebar layar.
   ========================================================================== */

[data-design="mnj"] .circuit-edge {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 18px;
  pointer-events: none;
}

[data-design="mnj"] .circuit__svg {
  display: block;
  width: 100%;
  height: 18px;
}

/* -- jalur tembaga ------------------------------------------------------- */
[data-design="mnj"] .circuit__trace {
  fill: none;
  stroke: rgba(var(--hud-cyan-rgb), .82);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Pendar tipis menaikkan kecerahan yang terasa tanpa menebalkan garisnya.
     Menaikkan stroke-width saja akan membuat jalurnya terlihat kasar pada
     tinggi bidang 18px. */
  filter: drop-shadow(0 0 3px rgba(var(--hud-cyan-rgb), .55));
}

/* Kaki komponen dibuat lebih redup supaya jalur utamanya tetap yang
   pertama terbaca. */
[data-design="mnj"] .circuit__branch {
  fill: none;
  stroke: rgba(var(--hud-cyan-rgb), .42);
  stroke-width: 1;
  stroke-linecap: round;
}

/* -- bantalan sambungan -------------------------------------------------- */
[data-design="mnj"] .circuit__pad {
  fill: rgba(6, 12, 22, .95);
  stroke: var(--hud-gold-bright);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 2.5px rgba(var(--hud-gold-rgb), .8));
  animation: circuit-pad 3.4s ease-in-out infinite;
}

/* Denyutnya bergerak di antara dua tingkat yang sama-sama terlihat, bukan
   dari nyaris padam ke terang - titik sambungannya harus tetap terbaca
   sepanjang waktu, bukan hanya saat kebetulan menyala. */
@keyframes circuit-pad {
  0%, 72%, 100% { stroke: rgba(var(--hud-gold-rgb), .8); }
  82% { stroke: var(--hud-gold-label); }
}

/* -- LED berjalan + ekor komet ------------------------------------------- */
[data-design="mnj"] .circuit__led {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hud-blue-white);
  box-shadow:
    0 0 5px 1px rgba(var(--hud-cyan-rgb), .95),
    0 0 12px 3px rgba(var(--hud-blue-rgb), .55);
  /* offset-rotate: auto memutar LED mengikuti arah jalur, jadi ekornya
     otomatis selalu menunjuk ke belakang tanpa perlu dihitung. */
  offset-rotate: auto;
  offset-distance: 0%;
  animation: circuit-led 4.2s linear infinite;
}

/* Ekor komet: memanjang ke arah -X lokal, yaitu tepat di belakang LED
   setelah elemennya diputar mengikuti jalur. */
[data-design="mnj"] .circuit__led::before {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(270deg, rgba(var(--hud-cyan-rgb), .85), rgba(var(--hud-blue-rgb), .22) 45%, transparent 100%);
  content: "";
  transform: translateY(-50%);
}

@keyframes circuit-led {
  0% { offset-distance: 0%; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Header perlu jadi acuan posisi supaya lapisannya bisa menempel di tepi
   bawah, dan tidak boleh memotong LED yang menonjol keluar. */
[data-design="mnj"] .site-header {
  position: sticky;
  overflow: visible;
}

@media (max-width: 767px) {
  [data-design="mnj"] .circuit-edge { bottom: -7px; height: 14px; }
  [data-design="mnj"] .circuit__svg { height: 14px; }
  [data-design="mnj"] .circuit__led { width: 4px; height: 4px; }
  [data-design="mnj"] .circuit__led::before { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] .circuit__pad,
  [data-design="mnj"] .circuit__led { animation: none; }
}



/* ==========================================================================
   DIALOG SESI KONEKSI
   ========================================================================== */

.session-shell {
  position: relative;
  width: min(94vw, 430px);
  padding: 28px 24px 24px;
  border: var(--hud-edge-strong) solid rgba(var(--hud-gold-rgb), .55);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--hud-gold-rgb), .12), transparent 60%),
    linear-gradient(180deg, rgba(10, 15, 26, .98), rgba(6, 9, 16, .99));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  text-align: center;
}

.session-modal__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  place-items: center;
  border: 2px solid rgba(var(--hud-gold-rgb), .7);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(var(--hud-gold-rgb), .2), rgba(8, 12, 20, .9) 70%);
  color: var(--hud-gold-bright);
}

.session-modal h2 {
  margin: 0 0 12px;
  color: var(--hud-text);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
}

.session-modal h2 strong { color: var(--hud-gold-bright); }

.session-modal__count {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--hud-blue-rgb), .4);
  background: rgba(var(--hud-blue-rgb), .09);
  color: var(--hud-text-muted);
  font-size: 11px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.session-modal__count strong {
  color: var(--hud-blue-bright);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.session-modal__hint {
  margin: 0 0 18px;
  color: var(--hud-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.session-modal__hint strong { color: var(--hud-text); }

.session-modal__actions { display: grid; gap: 9px; }

/* Membatalkan berarti kehilangan sisa waktu, jadi tombolnya dibuat sebagai
   tepi saja - bukan tombol penuh yang mengundang ditekan tanpa berpikir. */
.session-modal__cancel {
  width: 100%;
  border: 1.5px solid rgba(255, 107, 107, .6);
  background: rgba(255, 107, 107, .08);
  color: #ff9b9b;
  font-size: 12px;
  letter-spacing: .07em;
}

@media (hover: hover) and (pointer: fine) {
  .session-modal__cancel:hover {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, .16);
    color: #ffc2c2;
  }
}

.session-modal__keep { width: 100%; }

/* ==========================================================================
   STATUS KONEKSI DI POP-UP POLA MAIN
   ========================================================================== */

.game-connect-status {
  display: flex;
  align-items: center;
  margin: 8px 0 4px;
  padding: 7px 11px;
  border: 1px solid rgba(46, 204, 113, .38);
  border-radius: 8px;
  background: rgba(46, 204, 113, .09);
  color: var(--hud-text-muted);
  font-size: 11.5px;
  gap: 8px;
}

.game-connect-status[hidden] { display: none; }

.game-connect-status strong { color: #7ee2a8; }

.game-connect-status__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 7px rgba(46, 204, 113, .85);
}

.game-connect-status__time {
  margin-left: auto;
  color: #7ee2a8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ==========================================================================
   TAMPILAN MENUNGGU POLA MAIN
   ==========================================================================
   Memakai foto utama yang sama dengan hero. Bilah kemajuan 0-100% yang lama
   digerakkan timer dan selalu sampai 100% walau servernya belum menjawab,
   jadi dibuang - yang tersisa keterangan tahap tanpa mengaku tahu seberapa
   jauh prosesnya.
   ========================================================================== */

[data-design="mnj"] .loading-visual {
  position: relative;
  display: grid;
  overflow: hidden;
  width: min(74vw, 210px);
  height: min(74vw, 210px);
  margin: 0 auto 16px;
  border: 1px solid rgba(var(--hud-blue-rgb), .35);
  border-radius: 50%;
  place-items: center;
}

[data-design="mnj"] .loading-visual__media {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

[data-design="mnj"] .loading-visual__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--hud-blue-rgb), .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--hud-blue-rgb), .16) 1px, transparent 1px);
  background-size: 18px 18px;
}

[data-design="mnj"] .loading-visual__rings { position: absolute; inset: 0; }

[data-design="mnj"] .loading-ring {
  position: absolute;
  border: 1.5px solid rgba(var(--hud-cyan-rgb), .55);
  border-radius: 50%;
  inset: 12%;
  animation: loading-ring 2.4s ease-in-out infinite;
}

[data-design="mnj"] .loading-ring-2 {
  inset: 26%;
  border-color: rgba(var(--hud-gold-rgb), .5);
  animation-delay: .5s;
  animation-direction: reverse;
}

@keyframes loading-ring {
  0%, 100% { opacity: .4; transform: scale(.94) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.04) rotate(180deg); }
}

/* Garis pemindai yang menyapu dari atas ke bawah. */
[data-design="mnj"] .loading-scanline {
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--hud-cyan-rgb), .95), transparent);
  box-shadow: 0 0 12px rgba(var(--hud-cyan-rgb), .7);
  animation: loading-scanline 1.9s ease-in-out infinite;
}

@keyframes loading-scanline {
  0%, 100% { top: 8%; opacity: .35; }
  50% { top: 92%; opacity: 1; }
}

[data-design="mnj"] .loading-hint {
  margin: 6px 0 0;
  color: var(--hud-text-muted);
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] .loading-ring,
  [data-design="mnj"] .loading-scanline { animation: none; }
}


/* ==========================================================================
   KARTU GAME DI DESKTOP — AKSI TURUN KE BAWAH KARTU
   ==========================================================================
   Sebelumnya di desktop kedua aksi muncul sebagai pil melayang di atas gambar
   saat kartu disorot. Sekarang POLA MAIN kembali ke baris aksi di bawah
   MAXWIN - sama seperti di layar sentuh - sehingga tombolnya selalu terlihat
   tanpa perlu disorot lebih dulu, dan gambarnya bersih dari lapisan apa pun.
   ========================================================================== */

@media (min-width: 768px) {
  /* Lapisan sorot dilepas dengan display:none, bukan disembunyikan lewat
     opacity. Pil MAIN adalah <a> yang menutupi SELURUH gambar; kalau hanya
     dibuat transparan, sasaran kliknya tetap ada dan member yang bermaksud
     menekan gambar justru terlempar keluar halaman. display:none sekaligus
     mengeluarkannya dari urutan fokus dan dari pembaca layar. */
  [data-design="mnj"] .game-thumbnail__play,
  [data-design="mnj"] .game-thumbnail__pattern { display: none; }

  /* Menimpa aturan di blok sorot yang menyembunyikan tombol ini di desktop. */
  [data-design="mnj"] .card-actions .generate-game { display: inline-flex; }
}

/* ==========================================================================
   JARAK ISI KARTU DIJAMIN GAP, BUKAN MARGIN
   ==========================================================================
   .game-maxwin memakai margin-top: auto supaya terdorong ke dasar kartu.
   Artinya jaraknya SAMA DENGAN SISA RUANG yang kebetulan tersedia - dan pada
   kartu yang isinya penuh, sisa itu nol sehingga MAXWIN menempel persis di
   bawah bar persentase. Itu sebabnya jaraknya terlihat berbeda-beda antar
   kartu di baris yang sama.

   gap memberi jarak MINIMUM yang tidak bisa ditelan oleh margin auto, jadi
   semua kartu seragam berapa pun sisa ruangnya.
   ========================================================================== */

[data-design="mnj"] .game-content { gap: 11px; }

/* Margin lama dinolkan supaya tidak bertumpuk di atas gap dan jaraknya jadi
   dua kali lipat hanya di sebagian tempat. */
[data-design="mnj"] .game-content .game-percentage { margin-top: 0; }
[data-design="mnj"] .game-grid .card-actions { padding-top: 0; }
[data-design="mnj"] .game-content .game-maxwin { margin-bottom: 0; }

/* ==========================================================================
   BAR PERSENTASE BERGAYA BATERAI
   ==========================================================================
   Isian dipecah menjadi balok-balok kecil bertepi tipis, seperti indikator
   baterai. Balok memberi dua hal yang tidak diberikan batang penuh: nilainya
   bisa dibaca kasar tanpa melihat angkanya (menghitung balok), dan bidangnya
   terbaca sebagai instrumen sistem - selaras dengan bahasa HUD halaman ini.

   Balok digambar sebagai LAPISAN DI ATAS RELNYA, bukan di dalam isian.
   Isian diregangkan dengan transform: scaleX(), dan apa pun yang digambar di
   dalamnya ikut termampatkan - lebar baloknya akan berbeda-beda mengikuti
   persentase tiap game. Digambar di atas rel, lebar baloknya selalu sama.
   ========================================================================== */

[data-design="mnj"] .game-percentage__track {
  /* Jarak antar titik awal balok. 6px badan + garis rambut + celah gelap. */
  --mnj-cell: 9px;
}

[data-design="mnj"] .game-percentage__track::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(var(--mnj-cell) - 3px),
    rgba(255, 255, 255, .16) calc(var(--mnj-cell) - 3px),
    rgba(255, 255, 255, .16) calc(var(--mnj-cell) - 2px),
    rgba(3, 7, 15, .94) calc(var(--mnj-cell) - 2px),
    rgba(3, 7, 15, .94) var(--mnj-cell)
  );
}

/* Rel dipertegas sedikit supaya deretan balok punya bingkai yang jelas. */
[data-design="mnj"] .game-percentage__track {
  height: 9px;
  border-color: rgba(255, 255, 255, .10);
}

/* -- hanya persentase tinggi yang bergerak -------------------------------
   hud.css mematikan sapuan berjalan di semua bar, dan itu benar: satu layar
   bisa memuat 100 kartu, dan 100 animasi berjalan serentak membuat gulir
   tersendat di ponsel kelas menengah.

   Di sini sapuannya dihidupkan lagi HANYA untuk persentase tinggi. Geraknya
   jadi sekaligus penanda - yang bergerak berarti yang layak dilihat - dan
   yang beranimasi tinggal sebagian kecil kartu.

   Sapuannya berada DI DALAM isian yang ber-overflow:hidden, jadi cahayanya
   hanya menyapu balok yang menyala dan berhenti tepat di ujung isian. */
[data-design="mnj"] .game-percentage--good .game-percentage__fill::before {
  /* Sapuan bawaan components.css terlalu redup untuk terbaca di bar setinggi
     9px: puncaknya opacity .55 dikalikan opacity elemen .66, jadi sekitar .36
     - hampir tidak terlihat di antara balok baterai. Di sini intinya dibuat
     putih penuh supaya yang lewat terbaca sebagai CAHAYA, bukan sekadar warna
     bar yang sedikit lebih terang. */
  content: "";
  width: 30%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--percentage-color-soft) 34%, transparent) 34%,
    rgba(255, 255, 255, .92) 52%,
    color-mix(in srgb, var(--percentage-color-soft) 34%, transparent) 70%,
    transparent
  );
  opacity: 1;
  filter: blur(.4px);
  animation: mnj-percentage-sweep 3.2s ease-in-out infinite;
}

/* Sapuan sendiri, bukan percentage-light-sweep bawaan - yang itu menahan
   opacity di .55 dan menghabiskan 22% putarannya dalam keadaan mati. */
@keyframes mnj-percentage-sweep {
  0%, 16%, 100% { opacity: 0; transform: translateX(-140%) skewX(-18deg); }
  30% { opacity: 1; }
  62% { opacity: .85; }
  78% { opacity: 0; transform: translateX(300%) skewX(-18deg); }
}

/* -- kesan cembung -------------------------------------------------------
   Bar setinggi 9px tidak punya ruang untuk bayangan berlapis. Yang dipakai
   dua garis dalam saja: satu putih tipis di bibir atas sebagai pantulan
   cahaya, satu gelap di bawah sebagai bayangan badan. Dua garis itu cukup
   membuat matanya membaca permukaan melengkung, bukan bidang rata - dan
   keduanya inset, jadi tidak menambah satu piksel pun ke ukuran elemen. */
[data-design="mnj"] .game-percentage__track {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .05);
}

[data-design="mnj"] .game-percentage--good .game-percentage__fill {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 3px rgba(0, 0, 0, .4),
    0 0 12px var(--percentage-glow),
    0 0 22px color-mix(in srgb, var(--percentage-color) 18%, transparent);
}

/* Simpul di ujung isian ikut berdenyut. Hanya opacity yang dianimasikan -
   menganimasikan box-shadow memaksa peramban menggambar ulang tiap bingkai. */
[data-design="mnj"] .game-percentage--good .game-percentage__fill::after {
  width: 7px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85));
  animation: mnj-percentage-node 2.4s ease-in-out infinite;
}

@keyframes mnj-percentage-node {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

/* Angka persentase dibuat sedikit lebih tegas - ia yang dibaca lebih dulu,
   baloknya hanya penguat. */
[data-design="mnj"] .game-percentage__value { font-size: 14px; }

@media (max-width: 767px) {
  /* Balok dirapatkan di layar sempit supaya jumlahnya tetap masuk akal pada
     kartu yang jauh lebih sempit. */
  [data-design="mnj"] .game-percentage__track { --mnj-cell: 7px; height: 8px; }
  [data-design="mnj"] .game-percentage__value { font-size: 12.5px; }
  [data-design="mnj"] .game-content { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] .game-percentage--good .game-percentage__fill::before { content: none; }
  [data-design="mnj"] .game-percentage--good .game-percentage__fill::after { animation: none; opacity: 1; }
}


/* ==========================================================================
   SOROTAN TOMBOL — DIAM, TANPA CINCIN BERPUTAR
   ==========================================================================
   Cincin conic-gradient yang berputar di tepi setiap tombol sudah DIBUANG.
   Alasannya jumlah, bukan mutu: begitu efek yang sama dipasang di HUBUNGKAN,
   POLA MAIN, TAMPILKAN LEBIH BANYAK, MAIN SEKARANG, MASUK, dan DAFTAR, satu
   layar bisa memuat belasan tepi berputar sekaligus. Gerakan yang dimaksudkan
   menandai "ini bisa ditekan" justru berubah jadi kebisingan, dan tidak ada
   lagi yang menonjol karena semuanya menonjol.

   Penggantinya sorotan yang diam: tepi menyala dan sedikit pendar. Maksudnya
   tersampaikan sama jelasnya, tanpa satu pun animasi berjalan.

   Variabel --mnj-ring* sengaja DIPERTAHANKAN. Nilainya kini dipakai sebagai
   warna tepi saat disorot, jadi pembagian warna per tombol - biru untuk
   tombol gelap, putih panas untuk tombol emas - tetap berlaku tanpa ditulis
   ulang satu per satu.
   ========================================================================== */

[data-design="mnj"] .btn-generate,
[data-design="mnj"] .generate-game,
[data-design="mnj"] .game-load-more__button,
[data-design="mnj"] .header-actions .member-button,
[data-design="mnj"] .result-actions .btn {
  --mnj-ring: var(--hud-blue-bright);
  --mnj-ring-glow: rgba(var(--hud-cyan-rgb), .28);
  position: relative;
  isolation: isolate;
}

[data-design="mnj"] .game-load-more__button,
[data-design="mnj"] .header-actions .member-button--primary,
[data-design="mnj"] .result-actions .btn-primary {
  --mnj-ring: var(--hud-gold-hot);
  --mnj-ring-glow: rgba(var(--hud-gold-bright-rgb), .3);
}

/* Kilau sapuan bawaan ikut dimatikan - ia juga gerakan yang berjalan sendiri
   tanpa diminta, dan membuangnya setengah-setengah tidak menyelesaikan apa
   pun. */
[data-design="mnj"] .btn-generate::before,
[data-design="mnj"] .generate-game::before,
[data-design="mnj"] .game-load-more__button::before,
[data-design="mnj"] .header-actions .member-button::before,
[data-design="mnj"] .result-actions .btn::before {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="mnj"] .generate-game:hover:not(:disabled),
  [data-design="mnj"] .header-actions .member-button:hover {
    border-color: var(--mnj-ring);
    box-shadow: 0 0 12px var(--mnj-ring-glow);
  }

  [data-design="mnj"] .header-actions .member-button--outline:hover,
  [data-design="mnj"] .header-actions .member-button--secondary:hover {
    background: linear-gradient(145deg, #141d2c, #0d1420);
  }
}

[data-design="mnj"] .generate-game:focus-visible,
[data-design="mnj"] .header-actions .member-button:focus-visible {
  outline: 2px solid var(--mnj-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   HUBUNGKAN — TEPI EMAS DIAM
   ==========================================================================
   Cincin emas yang dulu berputar tanpa henti di tombol ini sudah DIBUANG
   bersama cincin tombol lain. Yang tersisa: tepi emas tetap 1,5px yang tegas,
   dan pendar biru di ::before.

   ::after kini kosong sepenuhnya di tombol ini - dan itu justru
   menguntungkan: pseudo-element itu memang milik garis pemindai keadaan
   "menghubungkan" (hud.css:1217), jadi tidak ada lagi yang perlu
   dikecualikan lewat :not([data-connection-state]).
   ========================================================================== */

[data-design="mnj"] #generator-form .btn-generate {
  --mnj-ring: var(--hud-gold-bright);
  --mnj-ring-hot: var(--hud-gold-hot);
}

/* -- ::before = CAHAYA, bukan bingkai --------------------------------------
   Khusus tombol ini, pembagiannya dibalik dari tombol lain:

     ::after   bingkai emas berputar   -> garis
     ::before  pendar biru berdenyut   -> cahaya

   Blok bersama di atas memasang cincin di ::before untuk SEMUA tombol; di
   sini ditimpa seluruhnya. Yang wajib ikut dinolkan adalah mask-nya - blok
   bersama melubangi bagian tengah supaya hanya tersisa bingkai, dan kalau
   lubang itu dibiarkan, pendarnya ikut berlubang di tengah dan hanya
   tersisa cincin biru tipis.

   z-index -1 supaya cahayanya duduk DI ATAS latar tombol tapi DI BAWAH
   tulisannya. Nilai 0 akan menutupi tulisan, karena elemen berposisi
   digambar setelah teks biasa. isolation: isolate pada tombol menahannya
   agar tidak jatuh ke belakang tombol sama sekali. */
[data-design="mnj"] #generator-form .btn-generate::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  background: radial-gradient(
    118% 172% at 50% 134%,
    rgba(64, 224, 255, .68) 0%,
    rgba(var(--hud-blue-rgb), .34) 34%,
    rgba(var(--hud-blue-rgb), .10) 54%,
    transparent 70%
  );
  content: "";
  display: block;
  opacity: 1;
  transform: none;
  clip-path: inherit;
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
  animation: mnj-connect-glow 3.8s ease-in-out infinite;
  transition: none;
  -webkit-mask: none;
  mask: none;
  -webkit-mask-composite: add;
  mask-composite: add;
}

/* Denyutnya bergerak antara dua tingkat yang sama-sama terlihat, bukan dari
   nyaris padam ke terang - tombolnya harus terbaca "hidup" sepanjang waktu,
   bukan hanya saat kebetulan menyala. */
@keyframes mnj-connect-glow {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
  /* Disorot: cahayanya menguat dan berhenti berdenyut - denyut berarti
     "menunggu", nyala tetap berarti "siap". */
  [data-design="mnj"] #generator-form .btn-generate:hover:not(:disabled)::before {
    opacity: 1;
    animation: none;
    background: radial-gradient(
      124% 180% at 50% 136%,
      rgba(120, 240, 255, .85) 0%,
      rgba(var(--hud-cyan-rgb), .48) 32%,
      rgba(var(--hud-blue-rgb), .16) 55%,
      transparent 72%
    );
  }

  /* Bingkainya ikut menguat: lebih tebal dan berputar lebih cepat.
     Sebelumnya cincin tetap ini justru DIREDUPKAN saat disorot karena ada
     cincin kedua di ::before yang mengambil alih - cincin itu sekarang
     sudah tidak ada, jadi ia sendiri yang harus menanggapi. */
  [data-design="mnj"] #generator-form .btn-generate:hover:not(:disabled)::after {
    opacity: 1;
    padding: 2.5px;
    animation-duration: 2.4s;
    filter: drop-shadow(0 0 10px rgba(var(--hud-gold-bright-rgb), .75));
  }
}

[data-design="mnj"] #generator-form .btn-generate:focus-visible::before {
  opacity: 1;
  animation: none;
}

[data-design="mnj"] #generator-form .btn-generate:focus-visible:not([data-connection-state])::after {
  opacity: 1;
  padding: 2px;
  animation-duration: 2.4s;
}

/* Ditekan: cahayanya meredup sesaat - seperti daya yang tersedot saat
   tombolnya benar-benar ditekan masuk. */
[data-design="mnj"] #generator-form .btn-generate:active:not(:disabled)::before {
  opacity: .45;
  animation: none;
}

[data-design="mnj"] #generator-form .btn-generate:disabled::before {
  opacity: .28;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] #generator-form .btn-generate::before { animation: none; opacity: .85; }
}


/* ==========================================================================
   SOROTAN KARTU PROVIDER — MENGIKUTI BENTUK KARTUNYA
   ==========================================================================
   components.css:164 memasang cincin conic-gradient pada ::before setiap
   kartu provider, dan cincin itu digambar sebagai PERSEGI biasa - tidak
   memakai clip-path sama sekali.

   Kartu provider di sini bersudut potong (chamfer 16px lewat clip-path).
   Karena clip-path juga memotong pseudo-element milik elemen yang sama,
   cincin persegi itu ikut terpotong di keempat sudutnya - hasilnya bingkai
   yang PUTUS di tiap sudut, tidak menyambung mengikuti bentuk kartunya.
   Itulah yang terlihat "tidak cocok dengan bentuknya".

   Cincinnya dibuang, bukan ditambal dengan clip-path: inherit. Ia juga
   menjalankan stroke-orbit 8 detik saat disorot - satu lagi tepi berputar,
   persis jenis gerakan yang baru saja dibuang dari semua tombol. Menambal
   bentuknya hanya akan mengembalikan masalah yang sama dalam bentuk rapi.

   Gantinya sorotan diam yang otomatis mengikuti bentuk: tepi menyala dan
   pendar. Keduanya digambar dari kartunya sendiri, jadi chamfer-nya diikuti
   tanpa perlu menyalin bentuknya ke elemen lain.
   ========================================================================== */

/* ⚠️ :not(.active) WAJIB. ::before yang sama juga dipakai lencana "AKTIF"
   pada kartu yang sedang dipilih (lihat blok LIMA POSISI di atas). Tanpa
   pengecualian ini, content: none ikut menghapus lencananya - dan kekuatan
   pemilihnya sama persis dengan aturan lencana, jadi yang menang hanya
   ditentukan urutan penulisan. Itu terlalu rapuh untuk diandalkan. */
[data-design="mnj"] .provider-list .provider-button:not(.active)::before { content: none; }

/* ==========================================================================
   GAMBAR PROVIDER MENGISI KARTU
   ==========================================================================
   Gambar provider kini berupa ilustrasi bermuatan penuh (350x202), bukan
   logo kecil berlatar transparan seperti sebelumnya (116x55). Batas 98x46
   yang lama dibuat untuk menahan logo agar tidak diperbesar melebihi
   resolusinya; pada gambar sebesar ini batas itu justru menyusutkan
   ilustrasinya jadi seperempat kartu.

   Rasionya kebetulan hampir sama persis - kartu 200x116 (1,72:1), gambar
   350x202 (1,73:1) - jadi gambarnya mengisi kartu nyaris tanpa sisa. Memang
   dirancang untuk kartu berproporsi ini.

   object-fit: contain, bukan cover: selisih rasionya di bawah 1%, jadi
   sisanya tidak terlihat, sementara cover akan memangkas tepi ilustrasi -
   dan pada gambar berisi karakter, yang terpangkas biasanya kepalanya.

   Nama provider tidak lagi bergantung pada gambar: sudah ditampilkan di
   bawah carousel dan pada deretan chip. */
[data-design="mnj"] .provider-list .provider-button { padding: 0; }

[data-design="mnj"] .provider-list .provider-button .provider-logo {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* ==========================================================================
   DESKTOP — ILUSTRASI TANPA BINGKAI
   ==========================================================================
   Kotak HUD dilepas seluruhnya di layar lebar. Alasannya bukan selera:
   ilustrasi ini berlatar transparan dan komposisinya KELUAR dari kotak -
   kepala naga, lentera, ekor - sehingga garis kotaknya memotong siluetnya
   sendiri. Waktu isinya masih logo kecil di tengah bidang kosong, kotak itu
   berfungsi sebagai wadah; sekarang ia jadi penghalang.

   Kedalamannya diganti drop-shadow, BUKAN box-shadow. drop-shadow membaca
   transparansi berkasnya sehingga bayangannya mengikuti lekuk ilustrasi;
   box-shadow selalu menggambar bayangan berbentuk kotak - persis bentuk yang
   sedang dihindari.

   Urutan perhatian tetap terbaca tanpa satu garis pun, dan semuanya sudah
   berjalan sejak awal: skala 1,18x di tengah, kartu samping diredupkan ke
   0,85 dan 0,45, kemiringan 10 dan 16 derajat, pantulan biru di lantai, plus
   nama provider dan chip di bawah carousel.
   ========================================================================== */

@media (min-width: 768px) {
  [data-design="mnj"] .provider-list .provider-button,
  [data-design="mnj"] .provider-list .provider-button.is-center,
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"],
  [data-design="mnj"] .provider-list .provider-button[data-slot="near-left"],
  [data-design="mnj"] .provider-list .provider-button[data-slot="near-right"],
  [data-design="mnj"] .provider-list .provider-button[data-slot="side-left"],
  [data-design="mnj"] .provider-list .provider-button[data-slot="side-right"] {
    border: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
  }

  /* -- panel kecil di belakang ilustrasi ---------------------------------
     Panelnya sengaja LEBIH KECIL daripada ilustrasinya. Kepala dan tangan
     karakter melewati tepi atas panel, sehingga terbaca keluar dari kartu -
     kedalaman tanpa animasi apa pun.

     Digambar pada .provider-corner, bukan ::before atau ::after. Keduanya
     sudah dipakai lencana AKTIF (tulisan di ::before, titik di ::after);
     menumpanginya akan menghapus lencana itu - regresi yang persis sama
     sudah pernah terjadi di sesi ini.

     .provider-corner kebetulan elemen sungguhan yang dibuat
     provider-filter.js untuk setiap tombol, jadi tidak ada markup baru yang
     perlu ditambahkan.

     z-index 0 menempatkannya di BELAKANG ilustrasi, yang sudah ber-z-index 3
     dari components.css. */
  [data-design="mnj"] .provider-list .provider-button .provider-corner {
    display: block;
    z-index: 0;
    /* Kapsul, mengikuti bentuk aslinya di situs Manjabet: ujung kiri-kanan
       membulat penuh, tingginya hanya sebagian kartu sehingga kepala dan
       bahu karakter menyembul keluar di atasnya. Menyembul itulah yang
       memberi kesan tiga dimensi - bukan bayangan atau perspektif. */
    inset: 27% 4% 6%;
    border: 1px solid rgba(var(--hud-gold-bright-rgb), .55);
    border-radius: 999px;
    /* Gradien warna DOMINAN yang digelapkan, lebih terang di bagian
       tengah-kanan tempat tulisan nama provider berada, dan meredup di kiri
       tempat karakternya berdiri - jadi tulisannya tetap terbaca di atas
       panel.

       Sebelumnya lima warna ini ditulis sebagai heksadesimal emas gelap
       (#1d1a0d sampai #6a5620). Itu emas yang sudah dicampur hitam, jadi
       tidak bisa diturunkan ke tema mana pun - dan panel ini tetap keemasan
       di tema merah maupun ungu walaupun tepinya sudah berubah. color-mix
       memisahkan lagi kedua keputusan itu: kegelapannya tetap, warnanya
       ikut tema. */
    background: linear-gradient(100deg,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 14%, #0b0d14) 0%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 30%, #0b0d14) 34%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 52%, #0b0d14) 62%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 36%, #0b0d14) 82%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 18%, #0b0d14) 100%);
    box-shadow:
      inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .16),
      inset 0 -2px 6px rgba(0, 0, 0, .45),
      0 8px 18px rgba(0, 0, 0, .5);
    pointer-events: none;
    transition: border-color var(--hud-hover) ease, box-shadow var(--hud-hover) ease;
  }

  /* Siku emas di keempat sudut panel DIBUANG. Panelnya sudah punya garis
     tepi menerus; siku di atasnya menggambar sudut yang sama dua kali, dan
     pada panel sekecil ini keempatnya hampir saling bersentuhan.

     Hanya di carousel. Siku pada tombol Semua Provider dan pada bar status
     tetap dipakai - di sana panelnya jauh lebih besar dan sikunya masih
     berfungsi sebagai penanda sudut. */
  [data-design="mnj"] .provider-list .provider-button .provider-corner i { display: none; }

  /* -- cincin fokus mengikuti panel, bukan kotak kartu --------------------
     Aturan bawaan menggambar outline 2px berjarak 3px MENGELILINGI TOMBOL.
     Sejak kartunya tidak lagi berkotak, cincin itu jadi persegi cyan yang
     menggantung di sekeliling ilustrasi - dan karena ia menempel setelah
     kartu diklik, terbaca seperti efek sorot yang nyangkut.

     Outline-nya dipindah ke panel kapsul: bentuknya ikut membulat, dan
     letaknya tepat pada benda yang memang terlihat. Fokus papan ketik tetap
     punya penanda yang jelas - itu tidak boleh sekadar dihapus. */
  /* -- lencana AKTIF dilepas di desktop -----------------------------------
     Lencana "AKTIF" dan titik emasnya dirancang untuk menempel pada TEPI
     BAWAH sebuah kartu berkotak. Sejak kotaknya dibuang, keduanya kehilangan
     tempat bersandar: lencananya melar jadi gumpalan membulat 88x115px yang
     menggantung di tengah kartu - terbaca sebagai lingkaran asing yang
     muncul begitu kartu diklik.

     Tidak ditambal ukurannya, tapi dilepas: penanda provider terpilih sudah
     ada di tiga tempat lain - nama besar di bawah carousel, chip yang
     menyala di deretan atas, dan kartunya sendiri yang berada di tengah.
     Menambah penanda keempat hanya mengulang.

     aria-pressed pada tombolnya tetap dipasang JavaScript, jadi pembaca
     layar tetap tahu mana yang sedang dipilih. Di layar sempit lencananya
     dibiarkan - di sana kartunya masih berkotak. */
  [data-design="mnj"] .provider-list .provider-button::before,
  [data-design="mnj"] .provider-list .provider-button::after { content: none; }

  [data-design="mnj"] .provider-list .provider-button:focus-visible { outline: none; }

  [data-design="mnj"] .provider-list .provider-button:focus-visible .provider-corner {
    outline: 2px solid var(--hud-blue-bright);
    outline-offset: 3px;
  }

  /* Kartu tengah: TANPA biru. Panelnya hanya sedikit lebih terang daripada
     kartu samping - itu sudah cukup, karena kartu tengah juga sudah lebih
     besar, lebih cerah, dan tegak menghadap depan. Garis biru di situ
     menambah warna ketiga pada bidang yang sudah ramai oleh ilustrasi. */
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"] .provider-corner {
    border-color: rgba(var(--hud-gold-rgb), .58);
    box-shadow:
      inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .14),
      0 10px 22px rgba(0, 0, 0, .55);
  }

  [data-design="mnj"] .provider-list .provider-button .provider-logo {
    filter: saturate(.85) brightness(.82) drop-shadow(0 8px 14px rgba(0, 0, 0, .65));
    transition: filter var(--hud-hover) ease;
  }

  /* Kartu tengah: cerah penuh, bayangan lebih dalam, plus pendar biru tipis
     yang juga mengikuti siluet - itu penanda "sedang dipilih" menggantikan
     tepi biru yang tadi dipakai. */
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"] .provider-logo {
    filter:
      saturate(1.04) brightness(1.06)
      drop-shadow(0 14px 22px rgba(0, 0, 0, .7))
      drop-shadow(0 0 16px rgba(var(--hud-blue-rgb), .45));
  }

  @media (hover: hover) and (pointer: fine) {
    [data-design="mnj"] .provider-list .provider-button:hover .provider-logo {
      filter:
        saturate(1) brightness(1)
        drop-shadow(0 12px 20px rgba(0, 0, 0, .7))
        drop-shadow(0 0 14px rgba(var(--hud-gold-rgb), .35));
    }

    /* Sorotan tepi dari blok sebelumnya tidak berlaku lagi - tidak ada tepi
       yang bisa disorot. */
    [data-design="mnj"] .provider-list .provider-button:hover,
    [data-design="mnj"] .provider-list .provider-button[data-slot="center"]:hover {
      border: 0;
      box-shadow: none;
    }

    /* Yang menanggapi sorotan sekarang panelnya. */
    [data-design="mnj"] .provider-list .provider-button:hover .provider-corner {
      border-color: var(--hud-gold-bright);
      box-shadow:
        inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .18),
        0 0 18px rgba(var(--hud-gold-rgb), .3),
        0 10px 22px rgba(0, 0, 0, .55);
    }
  }

  /* Pantulan elips biru di lantai DIBUANG. Bentuknya bulat sementara semua
     yang lain bersudut, dan warnanya biru sementara bidangnya sudah penuh
     warna ilustrasi - ia terbaca sebagai noda, bukan bayangan.

     Yang mendudukkan kartu pada bidang sekarang drop-shadow pada
     ilustrasinya sendiri, dan itu mengikuti siluet - jauh lebih tepat
     daripada elips yang bentuknya tidak berhubungan dengan apa pun. */
  [data-design="mnj"] .provider-carousel::after { display: none; }

  /* Pendar biru pada ilustrasi kartu tengah ikut dilepas: sejak panelnya
     tidak lagi biru, pendar biru di sekelilingnya jadi satu-satunya biru
     yang tersisa dan terbaca seperti sisa yang lupa dibuang. */
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"] .provider-logo {
    filter:
      saturate(1.04) brightness(1.06)
      drop-shadow(0 14px 22px rgba(0, 0, 0, .72));
  }
}

/* ==========================================================================
   PONSEL — GAMBAR PERSEGI VERSI PONSEL
   ==========================================================================
   Manjabet menyediakan dua potongan untuk gambar yang sama:

     desktop  350x202  melebar, karakter di samping tulisan
     ponsel   130x130  persegi, komposisinya dipadatkan

   Yang lebar tidak cocok untuk kartu kecil - karakternya jadi bubur. Yang
   persegi memang dibuat untuk ukuran ini, jadi ponsel memakai berkas itu.

   Kartunya ikut dibuat persegi (108x108, dari 150x90). Kalau kartunya tetap
   melebar, gambar persegi akan menyisakan bidang kosong di kiri dan kanan
   sebesar hampir sepertiga kartu.

   Kotak HUD tetap dipakai di sini - berbeda dengan desktop yang dilepas.
   Di ukuran sekecil ini gambarnya butuh wadah supaya tidak lebur ke latar.

   Alamat berkasnya datang dari variabel --prov-gambar-mobile yang dipasang
   provider-filter.js: CSS tidak bisa mengganti src sebuah <img> berdasarkan
   lebar layar, jadi gambarnya dipasang sebagai background dan <img> yang
   memuat ilustrasi desktop disembunyikan.

   PENTING: ilustrasi desktop 350x202 tetap ikut diunduh di ponsel karena
   <img>-nya tetap ada di DOM - display:none tidak selalu membatalkan
   unduhan yang sudah dimulai. Kalau nanti terasa berat, jalan yang benar
   adalah tidak membuat elemennya sama sekali di lebar layar sempit, dan itu
   pekerjaan JavaScript - bukan CSS.
   ========================================================================== */

@media (max-width: 767px) {
  /* Jarak antar posisi ikut dikecilkan mengikuti kartu yang menyempit dari
     150px ke 108px, supaya tingkat tumpang tindih "peek"-nya tetap sama. */
  [data-design="mnj"] .provider-list { --near-x: 80px; height: 158px; }

  [data-design="mnj"] .provider-list .provider-button { width: 108px; height: 108px; }

  /* Artwork DAN panel gradasinya dipasang sebagai dua lapisan background pada
     elemen yang sama - artwork di atas, panel di bawahnya.

     Sebelumnya panelnya digambar di ::before dengan z-index: -1, dan itu
     tidak pernah terlihat. Sebabnya urutan lukis CSS: anak ber-z-index
     negatif hanya naik di atas latar STACKING CONTEXT terdekat, dan kartu ini
     tidak selalu membuat stacking context sendiri di ponsel - transform-nya
     dinolkan dan opacity kartu tengah 1. Jadi panelnya melompat ke belakang
     latar kartu, tempat artwork sudah menutupinya rapat.

     Dua lapisan background tidak punya masalah itu: urutannya pasti,
     lapisan pertama selalu di atas lapisan berikutnya, dan tidak ada
     pseudo-element maupun z-index yang terlibat sama sekali. */
  [data-design="mnj"] .provider-list .provider-button:not(.is-all-providers) {
    background-image:
      var(--prov-gambar-mobile, none),
      linear-gradient(
        to top,
        color-mix(in srgb, rgb(var(--hud-gold-rgb)) 7%, rgba(9, 13, 21, .96)) 0%,
        color-mix(in srgb, rgb(var(--hud-gold-rgb)) 5%, rgba(11, 15, 24, .8)) 38%,
        color-mix(in srgb, rgb(var(--hud-gold-rgb)) 3%, rgba(14, 18, 28, .42)) 64%,
        transparent 82%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    /* 130px berkas di dalam kotak 108px: selalu dikecilkan, tidak pernah
       diperbesar melebihi resolusinya. Panelnya mengisi penuh. */
    background-size: 94% auto, 100% 100%;
    border-radius: 14px;
  }

  /* Kartu utama: panel yang sama, hanya menghangat ke emas. */
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"]:not(.is-all-providers) {
    background-image:
      var(--prov-gambar-mobile, none),
      linear-gradient(
        to top,
        color-mix(in srgb, rgb(var(--hud-gold-rgb)) 26%, rgba(8, 12, 20, .96)) 0%,
        color-mix(in srgb, rgb(var(--hud-gold-rgb)) 16%, rgba(10, 14, 22, .82)) 38%,
        color-mix(in srgb, rgb(var(--hud-gold-rgb)) 8%, rgba(14, 18, 28, .44)) 64%,
        transparent 82%);
  }

  /* Ilustrasi desktop disembunyikan; yang tampil latar di atas. */
  [data-design="mnj"] .provider-list .provider-button .provider-logo { display: none; }
}

/* Lencana AKTIF dipatok penuh: aturan hover bawaan components.css:187
   meredupkannya ke .58 dan memutarnya, karena ia menyangka ::before ini
   masih cincin hias. */
[data-design="mnj"] .provider-list .provider-button.active::before,
[data-design="mnj"] .provider-list .provider-button.active:hover::before {
  opacity: 1;
  animation: none;
}

/* Kilau berjalan bawaan (provider-card-glint, components.css:34) dimatikan
   juga. Ia berjalan terus-menerus di SETIAP kartu dengan jeda berbeda-beda,
   jadi selalu ada satu kartu yang sedang berkelebat - itu yang membuat
   deretannya terasa tidak pernah diam.

   Hanya animasinya yang dilepas, bukan seluruh aturannya: ::after yang sama
   juga dipakai titik lencana AKTIF dan ikon kisi pada tombol Semua Provider.
   Membuang aturannya akan ikut menghapus keduanya. */
[data-design="mnj"] .provider-button:not(.is-all-providers):not(.is-image-error)::after {
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="mnj"] .provider-list .provider-button:hover {
    border-color: var(--hud-gold-bright);
    box-shadow: 0 0 16px rgba(var(--hud-gold-rgb), .28), 0 14px 30px rgba(0, 0, 0, .55);
  }

  /* Kartu tengah sudah punya cahaya birunya sendiri; saat disorot yang
     ditambah hanya sedikit emas, bukan diganti seluruhnya. */
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"]:hover {
    border-color: var(--hud-gold-bright);
    box-shadow:
      0 0 0 1px rgba(var(--hud-blue-rgb), .55),
      0 0 0 5px rgba(var(--hud-blue-rgb), .16),
      0 0 30px rgba(var(--hud-blue-rgb), .45),
      0 0 18px rgba(var(--hud-gold-rgb), .3),
      0 20px 40px rgba(0, 0, 0, .6);
  }
}

/* ==========================================================================
   LABEL HOT DI CHIP NAMA PROVIDER
   ==========================================================================
   Chip nama yang berjalan di atas carousel. Di sinilah penanda HOT paling
   berguna: namanya sudah terbaca di situ, jadi labelnya langsung berpasangan
   dengan nama - berbeda dengan bar status, tempat ia hanya jadi daftar lepas
   yang tidak menunjuk apa pun.

   Provider mana yang ditandai tetap ditentukan panel admin lewat kolom
   providers.is_hot; chip membacanya dari kartu carousel yang sudah diberi
   kelas is-hot, jadi satu setelan mengendalikan keduanya sekaligus.
   ========================================================================== */

.provider-name-chip.is-hot {
  border-color: rgba(255, 90, 46, .6);
  background: rgba(38, 12, 8, .82);
  color: #ffd9b0;
}

@media (hover: hover) and (pointer: fine) {
  .provider-name-chip.is-hot:hover {
    border-color: #ff5a2e;
    background: rgba(255, 90, 46, .18);
    color: #fff0e2;
  }
}

.provider-name-chip__hot {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ff5a2e, #d21507);
  box-shadow: 0 1px 4px rgba(255, 61, 46, .45);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .provider-name-chip__hot { margin-left: 5px; padding: 2px 4px; font-size: 7px; }
}

/* ==========================================================================
   PITA HOT DI KARTU PROVIDER
   ==========================================================================
   Provider mana yang diberi pita ditentukan dari PANEL ADMIN (kolom
   providers.is_hot), bukan dipaku di berkas ini. Sekarang isinya Pragmatic
   Play dan PG Soft; kalau nanti berganti, tidak ada kode yang perlu disentuh.

   Bentuknya pita miring di sudut kiri atas, sama dengan yang dipakai di
   bagian "Sedang Ramai Dimainkan" - satu bentuk untuk satu arti, supaya
   member mengenalinya tanpa perlu belajar dua kali.
   ========================================================================== */

.provider-hot {
  position: absolute;
  z-index: 5;
  top: 11px;
  left: -30px;
  width: 104px;
  padding: 3px 0;
  background: linear-gradient(135deg, #ff5a2e, #d21507 55%, #8f0f04);
  box-shadow: 0 3px 10px rgba(255, 61, 46, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  transform: rotate(-45deg);
  pointer-events: none;
}

/* Kartu provider di desktop TIDAK memakai overflow: hidden - kotaknya sudah
   dilepas - jadi pita perlu dipotong sendiri. Dipangkas mengikuti sudut
   panel kecil di belakang ilustrasi, bukan mengikuti kotak kartu yang sudah
   tidak ada. */
@media (min-width: 768px) {
  [data-design="mnj"] .provider-list .provider-button.is-hot { overflow: hidden; }
  [data-design="mnj"] .provider-hot { top: 13px; left: -32px; width: 110px; font-size: 9px; }
}

@media (max-width: 767px) {
  .provider-hot { top: 9px; left: -26px; width: 90px; font-size: 7.5px; letter-spacing: .12em; }
}

/* ==========================================================================
   SEDANG RAMAI DIMAINKAN
   ==========================================================================
   Bagian tersendiri, bukan bagian dari daftar game. Isinya keadaan nyata di
   situs utama - jumlah pemain aktif - sedangkan daftar game di bawahnya
   adalah hasil perhitungan kita. Keduanya sengaja dipisah supaya member tidak
   mengira angka pemain ikut menentukan rekomendasi.

   Karena itu bidangnya juga dibedakan: kartunya lebih kecil, tanpa bar
   persentase, dan tanpa tombol POLA MAIN.
   ========================================================================== */

.popular-section { padding-block: 30px; }
.popular-section[hidden] { display: none; }

.popular-head { margin-bottom: 16px; text-align: center; }

.popular-title {
  margin: 0;
  color: var(--hud-gold-label);
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.popular-sub {
  margin: 6px 0 0;
  color: var(--hud-text-muted);
  font-size: 11.5px;
}

.popular-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1199px) { .popular-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .popular-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 480px)  { .popular-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.popular-card { min-width: 0; }

.popular-thumb {
  position: relative;
  display: grid;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  place-items: center;
  border: var(--hud-edge) solid var(--hud-gold-edge);
  border-radius: 10px;
  background: linear-gradient(150deg, var(--hud-card-alt), var(--hud-card));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}

.popular-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hud-hover) var(--hud-ease);
}

.popular-thumb.is-image-error::after {
  color: var(--hud-gold-edge-strong);
  content: "AI";
  font-size: 20px;
  font-weight: 900;
}

/* -- pita HOT di sudut kiri atas ------------------------------------------
   Bentuk pita miring, bukan lencana kapsul. Pita menempel pada SUDUT, jadi
   ia tidak menutupi bagian tengah gambar tempat karakter dan tulisan game
   berada - sementara lencana kapsul selalu memakan sepotong bidang datar.

   Digambar sebagai bidang miring yang jauh lebih lebar daripada kartunya,
   lalu dipotong oleh overflow: hidden milik .popular-thumb. Itu sebabnya
   ujung kiri dan kanannya tidak perlu dirapikan - keduanya memang di luar
   bingkai. */
.popular-hot {
  position: absolute;
  z-index: 4;
  top: 13px;
  left: -34px;
  width: 120px;
  padding: 4px 0;
  background: linear-gradient(135deg, #ff5a2e, #d21507 55%, #8f0f04);
  box-shadow: 0 3px 12px rgba(255, 61, 46, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  transform: rotate(-45deg);
  pointer-events: none;
}

/* -- kilau pada foto tiga teratas -----------------------------------------
   Pengecualian yang disengaja. Kilau berjalan sudah dibuang dari seluruh
   halaman karena terlalu ramai - tapi di sini ia hanya menempel pada TIGA
   kartu, dan justru itu gunanya: yang berkelebat berarti yang paling ramai.

   Jedanya panjang (menyapu 1,1 detik lalu diam 4 detik) supaya terbaca
   sebagai kilatan sesekali, bukan gerakan terus-menerus. */
.popular-card--top .popular-thumb::before {
  position: absolute;
  z-index: 3;
  top: -60%;
  bottom: -60%;
  left: -45%;
  width: 32%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 246, 216, .32),
    rgba(255, 255, 255, .5),
    rgba(255, 246, 216, .32),
    transparent
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(14deg);
  animation: popular-flash 5.1s var(--hud-ease) infinite;
}

@keyframes popular-flash {
  0% { opacity: 0; transform: translateX(0) rotate(14deg); }
  4% { opacity: 1; }
  18% { opacity: 1; }
  22% { opacity: 0; transform: translateX(420%) rotate(14deg); }
  100% { opacity: 0; transform: translateX(420%) rotate(14deg); }
}

/* Kartu kedua dan ketiga berkelebat tidak bersamaan - tiga kilatan serentak
   terbaca sebagai satu kedipan besar, bukan tiga sorotan. */
.popular-card--top:nth-of-type(2) .popular-thumb::before { animation-delay: 1.7s; }
.popular-card--top:nth-of-type(3) .popular-thumb::before { animation-delay: 3.4s; }

@media (prefers-reduced-motion: reduce) {
  .popular-card--top .popular-thumb::before { animation: none; opacity: 0; }
}

/* Tombol MAIN muncul saat kartu disorot. Di layar sentuh tidak ada hover,
   jadi di sana ia langsung terlihat - kalau tidak, tidak ada jalan main
   sama sekali dari bagian ini. */
.popular-play {
  position: absolute;
  z-index: 5;
  bottom: 10px;
  left: 50%;
  display: inline-flex;
  width: 78%;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1.5px solid var(--hud-gold-bright);
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(var(--hud-gold-dark-rgb), .30) 0%,
    rgba(var(--hud-gold-rgb), .40) 30%,
    rgba(var(--hud-gold-bright-rgb), .48) 50%,
    rgba(var(--hud-gold-rgb), .38) 70%,
    rgba(var(--hud-gold-deep-rgb), .28) 100%),
    linear-gradient(150deg, rgba(10, 15, 26, .95), rgba(6, 9, 16, .97));
  box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .22), 0 6px 16px rgba(0, 0, 0, .55);
  color: var(--hud-gold-label);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity var(--hud-hover) ease, transform var(--hud-hover) var(--hud-ease);
}

@media (hover: hover) and (pointer: fine) {
  .popular-card:hover .popular-play { opacity: 1; transform: translate(-50%, 0); }
  .popular-card:hover .popular-thumb img { transform: scale(1.04); }
  .popular-card:hover .popular-thumb { border-color: var(--hud-gold-bright); }
}

@media (hover: none) {
  .popular-play { opacity: 1; transform: translate(-50%, 0); }
}

.popular-play:focus-visible {
  opacity: 1;
  outline: 2px solid var(--hud-blue-bright);
  outline-offset: 2px;
  transform: translate(-50%, 0);
}

/* Lencana pemain di bagian ini duduk di kanan bawah - kiri bawah sudah
   ditempati tombol MAIN yang terpusat, dan HOT memakai kiri atas. */
.popular-thumb .game-player-badge {
  bottom: auto;
  left: auto;
  top: 6px;
  right: 6px;
}

.popular-name {
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--hud-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popular-provider {
  display: block;
  margin-top: 2px;
  color: var(--hud-text-muted);
  font-size: 10px;
}

@media (max-width: 767px) {
  .popular-section { padding-block: 22px; }
  .popular-name { font-size: 11px; }
  .popular-provider { font-size: 9px; }
  .popular-play { width: 84%; min-height: 30px; padding: 0 10px; font-size: 10.5px; letter-spacing: .1em; }
  .popular-hot { top: 11px; left: -32px; width: 110px; font-size: 8.5px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  .popular-play,
  .popular-thumb img { transition: none; }
}

/* ==========================================================================
   LENCANA PEMAIN AKTIF
   ==========================================================================
   Angkanya sama persis dengan yang tampil di Manjabet, diambil dari beranda
   mereka. Hanya muncul di game yang benar-benar punya angkanya - lihat
   buildPlayerBadge() di app.js.

   Ditaruh di kiri BAWAH gambar, berseberangan dengan lencana TERSEDIA yang
   menempati kanan atas, jadi keduanya tidak pernah bertumpuk.

   Warnanya hijau, mengikuti arti yang sudah dipakai di halaman ini: hijau =
   status hidup. Bukan emas, karena emas di sini berarti rangka, dan bukan
   biru, karena biru berarti sistem sedang bekerja.
   ========================================================================== */

.game-player-badge {
  position: absolute;
  z-index: 3;
  bottom: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(57, 229, 140, .45);
  border-radius: 999px;
  background: rgba(4, 18, 12, .86);
  color: var(--hud-green);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  pointer-events: none;
  /* Tanpa backdrop-filter dengan sengaja. Latarnya sudah 86% pekat, jadi blur
     hanya menggarap 14% sisanya - tidak terlihat mata. Tapi tiap backdrop-filter
     memaksa peramban membuat lapisan komposit sendiri, dan badge ini muncul di
     SETIAP kartu game. Dua belas lapisan tambahan demi efek yang tidak kelihatan
     adalah harga yang cuma dibayar, tidak pernah diterima. */
}

.game-player-badge strong {
  color: #b6ffd8;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

@media (max-width: 767px) {
  .game-player-badge {
    bottom: 5px;
    left: 5px;
    padding: 2px 6px;
    font-size: 8.5px;
  }

  .game-player-badge strong { font-size: 9.5px; }
}

/* ==========================================================================
   KETERANGAN BAGIAN DAFTAR GAME — DIPUSATKAN DAN DIPERTEGAS
   ==========================================================================
   Kalimat ini pengantar untuk seluruh daftar di bawahnya, bukan keterangan
   satu kolom - jadi rata kiri membuatnya terbaca seperti catatan yang
   menggantung di pojok. Dipusatkan dan ditebalkan supaya terbaca sebagai
   petunjuk, bukan tempelan.
   ========================================================================== */

[data-design="mnj"] [data-game-section-description] {
  max-width: 760px;
  margin: 0 auto 14px;
  color: var(--hud-text);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 767px) {
  [data-design="mnj"] [data-game-section-description] {
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   EMAS DITIPISKAN — TINGGAL GARIS TEPINYA
   ==========================================================================
   hud.css:433 mengisi penuh beberapa tombol dengan gradien emas metalik.
   Di dalam form dan kartu, bidang emas sebesar itu menarik perhatian
   melebihi porsinya - dan begitu ada dua tombol emas dalam satu layar,
   keduanya sama-sama berteriak sehingga tidak ada yang menang.

   Emasnya disisakan pada GARIS TEPI dan TULISANNYA saja. Bidangnya jadi
   gelap seperti panel lain, sehingga tombol tetap terbaca sebagai tombol
   tanpa mendominasi bidang di sekitarnya.

   Tombol DAFTAR di header sengaja TIDAK ikut: ia bukan bagian form maupun
   kartu, dan ia satu-satunya ajakan utama yang tersisa di header - di sana
   bidang emas justru masih pada tempatnya.
   ========================================================================== */

[data-design="mnj"] .modal .btn-generate,
[data-design="mnj"] .modal .btn-primary,
[data-design="mnj"] .game-load-more__button,
[data-design="mnj"] .card-actions .play-game,
[data-design="mnj"] .filter-sheet__apply {
  border: var(--hud-edge-strong) solid var(--hud-gold-edge-strong);
  /* Dua lapisan: sapuan emas tipis di atas, bidang gelap di bawah.
     Sudutnya 135 derajat, sama dengan --hud-gold-metal, sehingga arah
     kilaunya tetap sekeluarga dengan tombol emas penuh yang masih ada di
     header - hanya jauh lebih redup. Emasnya ditulis sebagai lapisan
     tersendiri, bukan dicampur ke warna gelapnya, supaya kepekatannya bisa
     dinaikkan saat disorot tanpa menghitung ulang seluruh gradien. */
  background:
    linear-gradient(135deg,
      rgba(var(--hud-gold-dark-rgb), .16) 0%,
      rgba(var(--hud-gold-rgb), .22) 28%,
      rgba(var(--hud-gold-bright-rgb), .28) 48%,
      rgba(var(--hud-gold-rgb), .20) 68%,
      rgba(var(--hud-gold-deep-rgb), .14) 100%),
    linear-gradient(150deg, rgba(17, 24, 39, .94), rgba(8, 12, 20, .97));
  color: var(--hud-gold-label);
  box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .12);
  text-shadow: none;
  /* Isi tombol dipusatkan. Beberapa tombol memuat ikon di kiri dan panah di
     kanan; tanpa ini, tulisannya duduk agak ke kiri mengikuti sisa ruang.

     gap wajib ditulis: .btn tidak pernah punya gap, dan spasi yang ada di
     antara span pada HTML tidak dirender sama sekali begitu wadahnya jadi
     flex - simpul teks berisi spasi saja diabaikan flexbox. Tanpa gap,
     ikon dan tulisannya menempel jadi "✦LIHAT POLA MAIN→". */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

/* Ikon di dalamnya ikut emas, tidak lagi gelap di atas bidang emas. */
[data-design="mnj"] .modal .btn-generate .ui-icon,
[data-design="mnj"] .modal .btn-primary .ui-icon,
[data-design="mnj"] .filter-sheet__apply .ui-icon { color: var(--hud-gold-bright); }

/* Kilau sapuan emas dimatikan - ia dirancang untuk bidang emas penuh, dan di
   atas bidang gelap hanya terlihat seperti noda terang yang melintas. */
[data-design="mnj"] .modal .btn-generate::before { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  [data-design="mnj"] .modal .btn-generate:hover:not(:disabled),
  [data-design="mnj"] .modal .btn-primary:hover:not(:disabled),
  [data-design="mnj"] .game-load-more__button:hover:not(:disabled),
  [data-design="mnj"] .card-actions .play-game:hover,
  [data-design="mnj"] .filter-sheet__apply:hover {
    border-color: var(--hud-gold-bright);
    /* Yang menguat hanya lapisan emasnya; bidang gelapnya tetap. */
    background:
      linear-gradient(135deg,
        rgba(var(--hud-gold-dark-rgb), .28) 0%,
        rgba(var(--hud-gold-rgb), .38) 28%,
        rgba(var(--hud-gold-bright-rgb), .46) 48%,
        rgba(var(--hud-gold-rgb), .34) 68%,
        rgba(var(--hud-gold-deep-rgb), .24) 100%),
      linear-gradient(150deg, rgba(26, 34, 52, .94), rgba(12, 17, 28, .97));
    color: var(--hud-gold-hot);
    box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .2);
  }
}

[data-design="mnj"] .modal .btn-generate:active:not(:disabled),
[data-design="mnj"] .modal .btn-primary:active:not(:disabled),
[data-design="mnj"] .game-load-more__button:active:not(:disabled),
[data-design="mnj"] .card-actions .play-game:active,
[data-design="mnj"] .filter-sheet__apply:active {
  border-color: var(--hud-gold-hot);
  /* Ditekan: lapisan emasnya diredupkan, jadi tombolnya terasa masuk ke
     dalam - bukan sekadar berganti warna tepi. */
  background:
    linear-gradient(135deg,
      rgba(var(--hud-gold-dark-rgb), .10) 0%,
      rgba(var(--hud-gold-rgb), .14) 48%,
      rgba(var(--hud-gold-deep-rgb), .08) 100%),
    linear-gradient(150deg, rgba(10, 14, 24, .98), rgba(6, 9, 15, .99));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   LENCANA STATUS DIPUSATKAN, KOLOM ISIAN DIRAPATKAN
   ==========================================================================
   generator.css:6 mendorong lencana "PROVIDER CONNECTED" ke tepi kanan
   (justify-content: flex-end). Di form satu kolom seperti sekarang, lencana
   yang menepi terbaca seperti tempelan di pojok - bukan judul keadaan.
   Dipusatkan, ia menjadi kepala form yang jelas.

   Soal renggangnya kolom: penyebab terbesarnya BUKAN jarak antar kolom,
   melainkan .field-error di generator.css:24 - baris pesan kesalahan yang
   selalu memesan ruang 16px + 3px padding di bawah SETIAP kolom, bahkan
   saat tidak ada kesalahan sama sekali. Dengan tiga kolom, itu 57px ruang
   kosong yang tidak pernah terpakai.

   Ruangnya tetap dipesan, hanya dikecilkan. Menghapusnya sama sekali akan
   membuat seluruh form melompat turun begitu satu pesan muncul - dan
   lompatan itu terjadi tepat saat member sedang membaca kesalahannya.
   ========================================================================== */

[data-design="mnj"] #generator-form .form-status-row {
  justify-content: center;
  margin-bottom: 12px;
}

[data-design="mnj"] #generator-form .form-grid { gap: 8px; }

[data-design="mnj"] #generator-form .field label {
  margin-bottom: 4px;
  font-size: 10.5px;
  letter-spacing: .02em;
}

[data-design="mnj"] #generator-form .field-error {
  min-height: 13px;
  padding-top: 2px;
  font-size: 10px;
  line-height: 1.15;
}

@media (max-width: 767px) {
  [data-design="mnj"] #generator-form .form-status-row { margin-bottom: 9px; }
  [data-design="mnj"] #generator-form .form-grid { gap: 7px; }
  [data-design="mnj"] #generator-form .field-error { min-height: 11px; }
}

/* ==========================================================================
   HEADER RAMPING DI PONSEL — SATU BARIS, SATU TOMBOL
   ==========================================================================
   responsive.css:31-33 membuat deretan tombol menjadi selebar layar dan
   memusatkan logo di bawah 600px. Akibatnya header tersusun DUA BARIS -
   logo di atas, tombol di bawah - dan tingginya hampir dua kali lipat.
   Di layar setinggi 640px, itu memakan ruang yang jauh lebih berharga
   untuk isinya.

   Di sini semuanya dikembalikan ke satu baris: logo di kiri, tombol di
   kanan, persis seperti di desktop hanya lebih rapat.

   Yang ditampilkan hanya tombol PERTAMA. Dipilih lewat :first-child, bukan
   lewat nama kelas gayanya, supaya urutannya tetap ditentukan dari panel
   admin - kalau suatu saat Anda menukar urutan MASUK dan DAFTAR di sana,
   yang tampil di ponsel ikut berubah tanpa menyentuh berkas ini. Memilih
   lewat .member-button--primary akan salah sasaran begitu gaya tombolnya
   diganti admin.
   ========================================================================== */

@media (max-width: 600px) {
  [data-design="mnj"] .site-header--with-member-buttons,
  [data-design="mnj"] .site-header--with-member-buttons.is-scrolled {
    height: auto;
    min-height: 56px;
  }

  [data-design="mnj"] .site-header--with-member-buttons .header-inner,
  [data-design="mnj"] .site-header--with-member-buttons.is-scrolled .header-inner {
    align-items: center;
    flex-wrap: nowrap;
    min-height: 56px;
    padding-block: 0;
  }

  /* Logo kembali ke kiri; di susunan dua baris ia sengaja dipusatkan. */
  [data-design="mnj"] .site-header--with-member-buttons .brand:not(.brand--without-logo) {
    margin-inline: 0;
    flex: 0 1 auto;
    min-width: 0;
  }

  [data-design="mnj"] .brand-logo { height: 32px; }

  [data-design="mnj"] .header-actions {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
    padding-block: 0;
    gap: 0;
  }

  /* Sisanya disembunyikan, bukan dihapus dari DOM: di layar lebih lebar
     tombolnya tetap dibutuhkan, dan daftarnya dibangun sekali oleh
     JavaScript untuk semua ukuran layar. */
  [data-design="mnj"] .header-actions .member-button:not(:first-child) { display: none; }

  [data-design="mnj"] .header-actions .member-button:first-child {
    min-height: 34px;
    padding-inline: 14px;
    font-size: 11px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
}

/* ==========================================================================
   PANEL PENCARIAN TIDAK LAGI MENEMPEL DI BAWAH HEADER
   ==========================================================================
   Penyebab getarannya bukan sekadar "menempel", melainkan umpan balik:

   filter-sheet.js:173 menghitung ambang menempel dari tinggi header yang
   NYATA - padahal header itu sendiri mengecil dari 72px ke 64px begitu
   halaman digulir. Saat kelas .is-stuck terpasang, padding bar dan tinggi
   kotak pencarian ikut mengecil dengan transisi, tata letak bergeser
   sedikit, ambangnya terlampaui lagi, kelasnya lepas - dan berulang. Di
   sekitar titik ambang itu barnya terlihat bergetar.

   Panel ini juga menahan satu baris ruang di layar setiap saat, padahal
   bagian lain halaman dibiarkan lewat begitu saja.

   Kelasnya dibiarkan tetap dipasang JavaScript; yang dilepas hanya akibat
   tampilannya. Menyentuh JS-nya berisiko memutus bottom sheet yang dipasang
   fungsi yang sama.
   ========================================================================== */

[data-design="mnj"] .filter-bar {
  position: static;
  transition: none;
}

/* Semua perubahan ukuran milik .is-stuck dikembalikan ke ukuran normal,
   sehingga kelas yang masih dipasang JS tidak lagi mengubah apa pun. */
[data-design="mnj"] .filter-bar.is-stuck {
  padding: 12px 14px;
  border-color: var(--hud-gold-edge);
  box-shadow: var(--hud-shadow);
}

[data-design="mnj"] .filter-bar.is-stuck .search-box { height: 44px; }

[data-design="mnj"] .filter-bar.is-stuck .filter-controls select,
[data-design="mnj"] .filter-bar.is-stuck .filter-trigger { min-height: 44px; }

[data-design="mnj"] .filter-bar.is-stuck .view-switch { padding: 3px; }

@media (max-width: 1050px) {
  /* Aturan pengganti tinggi kotak pencarian di layar sempit tetap berlaku. */
  [data-design="mnj"] .filter-bar.is-stuck .search-box { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] .btn-generate:hover::before,
  [data-design="mnj"] .generate-game:hover::before,
  [data-design="mnj"] .game-load-more__button:hover::before,
  [data-design="mnj"] .header-actions .member-button:hover::before,
  [data-design="mnj"] .result-actions .btn:hover::before,
  [data-design="mnj"] .btn-generate:focus-visible::before,
  [data-design="mnj"] .generate-game:focus-visible::before,
  [data-design="mnj"] .game-load-more__button:focus-visible::before,
  [data-design="mnj"] .header-actions .member-button:focus-visible::before,
  [data-design="mnj"] .result-actions .btn:focus-visible::before {
    animation: none;
    background: var(--mnj-ring);
  }
}


/* ==========================================================================
   TOMBOL MAIN DI KARTU GAME — KHUSUS DESKTOP
   ==========================================================================
   Berbeda dari tombol MAIN SEKARANG di baris aksi mobile: tujuannya per game
   (api/play.php?game=ID), bukan satu alamat beranda untuk seluruh kartu.

   Dua hal sengaja dijaga di sini:

   1. TIDAK berisi emas. POLA MAIN adalah aksi utama halaman ini - itu yang
      dijual. Kalau MAIN diberi bidang emas yang sama, dua tombol bersebelahan
      sama-sama berteriak dan tidak ada yang menang. MAIN cukup bertepi.

   2. Disembunyikan di mobile. Di sana baris aksi sudah memuat MAIN SEKARANG
      dari pengaturan member; dua tombol MAIN dalam satu kartu hanya membuat
      member menebak mana yang benar.
   ========================================================================== */

[data-design="mnj"] .card-actions .game-play-link { display: none; }

@media (min-width: 768px) {
  [data-design="mnj"] .card-actions .game-play-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    padding-inline: 10px;
    border: 1px solid rgba(var(--hud-gold-rgb), .38);
    border-radius: 9px;
    background: linear-gradient(150deg, rgba(17, 24, 39, .9), rgba(8, 12, 20, .95));
    color: var(--hud-gold-label);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .08);
    transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
  }

  [data-design="mnj"] .card-actions .game-play-link svg { flex: none; }

  /* MAIN SEKARANG yang beralamat global disingkirkan HANYA dari kartu yang
     sudah punya tombol MAIN per game. Dua tombol dengan tulisan hampir sama
     tapi tujuan berbeda adalah jebakan.

     Aturan ini perlu ditulis karena blok "emas ditipiskan" di atas memasang
     display: inline-flex pada .play-game, dan itu tanpa sengaja menghidupkan
     kembali tombol yang sudah dimatikan di baris 1033 - tombol itu memang
     hanya diniatkan untuk layar sentuh.

     :has() dipakai supaya kartu yang providernya TIDAK punya kode peluncuran
     tetap menyisakan MAIN SEKARANG - lebih baik tombol beralamat beranda
     daripada kartu tanpa jalan bermain sama sekali. */
  [data-design="mnj"] .card-actions:has(.game-play-link) .play-game { display: none; }
}

/* ==========================================================================
   SOROTAN DUA TOMBOL KARTU — GRADIEN MENYALA, TANPA GERAKAN
   ==========================================================================
   Dua hal diperbaiki di sini.

   1. GETARAN. components.css:2 memasang transform: translateY(-2px) pada
      SEMUA .btn saat disorot, dan kartunya sendiri ikut terangkat 4px oleh
      hud.css. Tombol yang bergerak di dalam kartu yang juga bergerak membuat
      batas tombolnya berpindah dari bawah kursor: hover lepas, tombol turun,
      kursor mengenainya lagi, naik lagi - berulang beberapa kali per detik.
      Itulah getarannya. Perpindahannya dibuang; yang berubah hanya warna,
      dan warna tidak pernah menggeser apa pun.

   2. DUA TOMBOL, DUA WARNA. Sebelumnya keduanya menyala ke arah yang mirip
      sehingga sorotan tidak memberi tahu apa-apa. Sekarang dibedakan tegas
      dan mengikuti tugas masing-masing:

        POLA MAIN  biru   - warna analisis, isi pokok halaman ini
        MAIN       emas   - warna aksi keluar, sama dengan tombol emas lain

      Keduanya gradien yang menyala dari bidangnya sendiri, bukan lapisan
      tambahan, jadi tidak ada pseudo-element baru yang perlu dianimasikan.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  /* Perpindahan bawaan dinolkan lebih dulu, sebelum warnanya diatur. */
  [data-design="mnj"] .game-card .card-actions .btn:hover:not(:disabled) {
    transform: none;
  }

  /* POLA MAIN - biru menyala. */
  [data-design="mnj"] .game-card .card-actions .generate-game:hover:not(:disabled) {
    border-color: var(--hud-blue-bright);
    background: linear-gradient(135deg,
      rgba(var(--hud-blue-rgb), .34) 0%,
      rgba(var(--hud-cyan-rgb), .44) 46%,
      rgba(var(--hud-blue-rgb), .28) 100%);
    color: var(--fx-blue-light);
    box-shadow: inset 0 1px 0 rgba(220, 245, 255, .22), 0 0 16px rgba(var(--hud-cyan-rgb), .3);
  }

  /* MAIN - emas menyala. */
  [data-design="mnj"] .card-actions .game-play-link:hover {
    border-color: var(--hud-gold-bright);
    background: linear-gradient(135deg,
      rgba(var(--hud-gold-dark-rgb), .3) 0%,
      rgba(var(--hud-gold-bright-rgb), .44) 46%,
      rgba(var(--hud-gold-deep-rgb), .26) 100%);
    color: var(--hud-gold-hot);
    box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .22), 0 0 16px rgba(var(--hud-gold-rgb), .3);
  }
}

/* Ditekan tetap ada umpan baliknya - :active hanya menyala selama tombol
   benar-benar ditekan, jadi ia tidak bisa memicu putaran hover seperti di
   atas. Yang dipakai bayangan masuk, bukan perubahan ukuran. */
[data-design="mnj"] .game-card .card-actions .btn:active:not(:disabled) {
  transform: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}

[data-design="mnj"] .card-actions .game-play-link:active { border-color: var(--hud-gold-hot); }

/* ==========================================================================
   LOADING POLA MAIN — CAHAYANYA DIBUAT NYATA
   ==========================================================================
   Sebelumnya isinya dua cincin dan satu garis setebal 2px. Garis setipis itu
   membaca sebagai GARIS, bukan cahaya: cahaya punya badan, punya sisa, dan
   menerangi apa yang dilewatinya. Tiga hal ditambahkan, semuanya lapisan
   yang sudah ada atau pseudo-element - tidak ada elemen baru di HTML:

     1. badan pemindai   pita lembut yang mengikuti garisnya, sehingga yang
                         lewat terasa menyapu, bukan sekadar berpindah
     2. denyut inti      pendar dari tengah yang naik-turun, seperti sistem
                         yang sedang menarik napas menunggu jawaban
     3. sapuan melintang cahaya yang melintas di seluruh bidang, memberi
                         kesan permukaannya sedang dibaca

   Semuanya opacity dan transform saja. Tidak ada yang menganimasikan
   box-shadow atau filter per bingkai - modal ini muncul justru di saat
   halaman sedang paling sibuk.
   ========================================================================== */

[data-design="mnj"] .loading-visual {
  border-color: rgba(var(--hud-cyan-rgb), .32);
  box-shadow:
    inset 0 0 26px rgba(var(--hud-blue-rgb), .28),
    0 0 30px rgba(var(--hud-blue-rgb), .22);
}

/* -- 1. badan pemindai --------------------------------------------------- */
[data-design="mnj"] .loading-scanline::before {
  position: absolute;
  right: 0;
  left: 0;
  /* Pita menggantung DI ATAS garisnya, bukan mengapit: cahaya pemindai
     meninggalkan jejak di belakang arah jalannya, tidak di kedua sisi. */
  bottom: 0;
  height: 26px;
  background: linear-gradient(to top, rgba(var(--hud-cyan-rgb), .34), transparent);
  content: "";
  pointer-events: none;
}

[data-design="mnj"] .loading-scanline {
  height: 2.5px;
  background: linear-gradient(90deg, transparent, rgba(215, 245, 255, .98) 35%, #fff 50%, rgba(215, 245, 255, .98) 65%, transparent);
  box-shadow: 0 0 16px rgba(var(--hud-cyan-rgb), .9), 0 0 34px rgba(var(--hud-blue-rgb), .5);
}

/* -- 2. denyut inti ------------------------------------------------------- */
[data-design="mnj"] .loading-visual__rings::after {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(var(--hud-cyan-rgb), .5) 34%, rgba(var(--hud-blue-rgb), .18) 60%, transparent 74%);
  content: "";
  pointer-events: none;
  animation: mnj-loading-core 1.5s ease-in-out infinite;
}

@keyframes mnj-loading-core {
  0%, 100% { opacity: .35; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* -- aliran handshake ----------------------------------------------------- */
.loading-code { display: none; }

[data-design="mnj"] .loading-code {
  display: block;
  min-height: 1.2em;
  margin: 7px 0 0;
  color: rgba(57, 229, 140, .82);
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keterangan tahap dibuat terbaca sebagai keluaran sistem, bukan kalimat
   biasa: rata tengah, huruf berjarak, dan warna biru sistem yang sama dengan
   cahayanya - supaya tulisan dan cahayanya terbaca berasal dari satu proses. */
[data-design="mnj"] #loading-status {
  color: var(--hud-blue-white, var(--hud-blue-white));
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--hud-cyan-rgb), .45);
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] .loading-visual__rings::after { animation: none; }

  /* Girnya berhenti berputar - itu hiasan. Tapi pintunya tetap terbuka dan
     cap berhasilnya tetap muncul, karena keduanya menyampaikan hasil.
     Keduanya dipasang sebagai keadaan akhir, tanpa gerak. */
  [data-design="mnj"] .loading-gear { animation: none; }
  [data-design="mnj"] .loading-door { animation: none; opacity: 0; }
  [data-design="mnj"] .loading-stamp { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ==========================================================================
   SEDANG RAMAI — BARIS TOMBOL DISAMAKAN DENGAN GRID
   ==========================================================================
   Dulu bagian ini hanya punya pil MAIN yang muncul saat foto disorot. Dua
   akibatnya sama-sama buruk:

     - game paling ramai justru satu-satunya yang polanya tidak bisa dilihat,
       padahal justru itu yang paling ingin dilihat polanya;
     - tombolnya baru ada setelah kursor mendarat, jadi di layar sentuh ia
       terbaca hanya sebagai gambar biasa.

   Sekarang susunannya persis kartu di grid bawah: POLA MAIN di atas, MAIN
   di bawah, keduanya selalu terlihat. Warna sorotnya pun sama - biru untuk
   pola, emas untuk main - supaya member tidak perlu belajar dua bahasa warna
   dalam satu halaman.
   ========================================================================== */

/* Kedua tombol dibungkus satu panel bertepi.
   Kartu di bagian ini berjajar rapat tanpa kotak pembungkus, jadi begitu tiap
   kartu punya DUA tombol, deretan tombol itu terbaca sebagai satu barisan
   panjang - mata tidak punya penanda di mana milik satu game berakhir dan
   milik game sebelahnya mulai. Tepi tipis ini yang memberi batasnya. */
.popular-actions {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  /* Sedikit lebih gelap dari latar kartu, supaya panelnya terbaca sebagai
     wadah yang menjorok ke dalam - bukan kotak lain yang menumpuk di atas. */
  background: rgba(4, 8, 16, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.popular-actions .btn {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 10px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

/* POLA MAIN - biru, sama dengan .generate-game di grid.
   Warnanya dinaikkan sedikit dari keadaan diamnya yang dulu (latar .1 rata):
   di dalam panel yang lebih gelap, warna setipis itu nyaris hilang dan
   tombolnya terbaca seperti tulisan biasa. Tetap gradien tipis, bukan bidang
   penuh - yang penuh warnanya disimpan untuk keadaan disorot. */
.popular-pattern {
  border: 1px solid rgba(var(--hud-blue-rgb), .55);
  background: linear-gradient(150deg, rgba(var(--hud-blue-rgb), .2), rgba(var(--hud-blue-rgb), .08));
  color: var(--fx-blue-light, var(--fx-blue-light));
}

/* MAIN - emas bertepi, sama dengan .game-play-link di grid.
   Seluruh sifat pil melayang yang lama dibatalkan di sini: posisinya kembali
   mengikuti aliran, dan opacity/transform yang dulu dipakai untuk
   memunculkannya saat disorot tidak berlaku lagi. */
.popular-actions .popular-play {
  position: static;
  width: 100%;
  border: 1px solid rgba(var(--hud-gold-rgb), .55);
  border-radius: 9px;
  /* Lapisan emas tipis di atas bidang gelap - sama dengan pola tombol emas
     lain di halaman ini, hanya jauh lebih redup. Tanpa lapisan itu tombolnya
     hanya kotak gelap bertepi, dan di dalam panel yang juga gelap ia hampir
     tidak terlihat sebagai tombol. */
  background:
    linear-gradient(150deg, rgba(var(--hud-gold-rgb), .18), rgba(var(--hud-gold-deep-rgb), .07)),
    linear-gradient(150deg, rgba(17, 24, 39, .9), rgba(8, 12, 20, .95));
  color: var(--hud-gold-label);
  opacity: 1;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .1);
}

.popular-actions .popular-play svg { flex: none; }

@media (hover: hover) and (pointer: fine) {
  /* Perpindahan bawaan .btn dinolkan dengan alasan yang sama seperti di
     kartu grid: tombol yang bergeser di bawah kursor membuat hover lepas dan
     mengenai bergantian, dan itu terbaca sebagai getaran. */
  .popular-actions .btn:hover { transform: none; }

  .popular-pattern:hover {
    border-color: var(--hud-blue-bright);
    background: linear-gradient(135deg,
      rgba(var(--hud-blue-rgb), .34) 0%,
      rgba(var(--hud-cyan-rgb), .44) 46%,
      rgba(var(--hud-blue-rgb), .28) 100%);
    color: var(--fx-blue-light);
    box-shadow: inset 0 1px 0 rgba(220, 245, 255, .22), 0 0 16px rgba(var(--hud-cyan-rgb), .3);
  }

  .popular-actions .popular-play:hover {
    border-color: var(--hud-gold-bright);
    background: linear-gradient(135deg,
      rgba(var(--hud-gold-dark-rgb), .3) 0%,
      rgba(var(--hud-gold-bright-rgb), .44) 46%,
      rgba(var(--hud-gold-deep-rgb), .26) 100%);
    color: var(--hud-gold-hot);
    box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .22), 0 0 16px rgba(var(--hud-gold-rgb), .3);
  }

  /* Aturan lama yang memunculkan pil saat kartu disorot sudah tidak punya
     sasaran, tapi ditulis ulang di sini supaya tidak ada yang menggesernya. */
  .popular-card:hover .popular-actions .popular-play { transform: none; }
}

.popular-actions .btn:active { transform: none; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5); }

.popular-actions .btn:focus-visible {
  outline: 2px solid var(--hud-blue-bright);
  outline-offset: 2px;
  transform: none;
}

@media (max-width: 767px) {
  .popular-actions { gap: 5px; margin-top: 8px; padding: 5px; border-radius: 10px; }
  .popular-actions .btn { min-height: 30px; font-size: 9.5px; letter-spacing: .06em; }
}

/* ==========================================================================
   GULUNGAN PROVIDER DI BAWAH FOTO HERO
   ==========================================================================
   Bentuknya mesin jackpot, isinya teks. Satu jendela setinggi satu baris,
   dan di baliknya pita berisi nama provider yang berjalan ke atas.

   Ia hanya ada selama proses menghubungkan. Gulungan yang menganggur di
   halaman diam akan terbaca sebagai undian yang menunggu ditarik - padahal
   yang menentukan hasilnya bukan gulungannya, melainkan provider yang
   dipilih member di form.

   Markup-nya ada di semua tema, jadi disembunyikan lebih dulu dan hanya
   dinyalakan di bawah MNJ.
   ========================================================================== */

.provider-reel { display: none; }

[data-design="mnj"] .provider-reel {
  position: absolute;
  z-index: 5;
  right: 0;
  /* Digeser ke ATAS lencana SISTEM TERHUBUNG, bukan sekadar di atas baris
     status. Lencana itu duduk di bottom: 7% (connection-fx.css:268) dan
     tingginya sekitar 38px; pada bottom: 34px yang lama, keduanya menempati
     petak yang hampir sama persis - dan keduanya muncul pada detik yang sama,
     saat mendarat. Yang terlihat: nama provider tertimpa lencana yang juga
     menyebut nama provider.

     54px memberi jarak sekitar 16px di atas tepi lencana, cukup untuk
     terbaca sebagai dua baris terpisah. Memakai calc dari persen yang sama,
     bukan angka tetap, supaya jaraknya ikut kalau fotonya berubah ukuran. */
  bottom: calc(7% + 54px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

[data-design="mnj"] .provider-reel.is-active { opacity: 1; }

[data-design="mnj"] .provider-reel__label {
  color: var(--hud-text-muted, #8ea3bb);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
}

/* Jendela: tingginya PERSIS satu baris, dan itu yang membuat gulungan ini
   terbaca sebagai gulungan - kalau dua baris terlihat sekaligus, yang
   tampak hanya daftar yang menggulir. */
[data-design="mnj"] .provider-reel__window {
  position: relative;
  height: 26px;
  min-width: 168px;
  overflow: hidden;
  border: 1px solid rgba(var(--hud-cyan-rgb), .3);
  border-radius: 8px;
  background: rgba(4, 8, 16, .72);
  box-shadow: inset 0 0 14px rgba(var(--hud-blue-rgb), .22);
}

/* Bibir gelap di atas dan bawah jendela. Nama yang sedang lewat masuk dan
   keluar lewat bayangan, bukan terpotong rata oleh tepi kotak - itu yang
   memberi kesan pita fisik yang melengkung menjauh. */
[data-design="mnj"] .provider-reel__window::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(4, 8, 16, .95) 0%,
    transparent 34%,
    transparent 66%,
    rgba(4, 8, 16, .95) 100%);
  content: "";
  pointer-events: none;
}

[data-design="mnj"] .provider-reel__strip {
  display: block;
  will-change: transform;
}

/* -- kecepatan putar ------------------------------------------------------
   Dulu satu set penuh (36 nama, 936px) dihabiskan dalam 0,62 detik. Itu
   1.500px per detik: pada 60 bingkai per detik, pita melompat 25px tiap
   bingkai - hampir persis setinggi satu baris. Yang terlihat bukan gerakan
   melainkan KEDIPAN, karena tiap bingkai menampilkan nama yang berbeda tanpa
   pernah menunjukkan perpindahannya.

   1,25 detik per set menurunkannya ke 750px/detik: sekitar 12px tiap
   bingkai, cukup kecil untuk terbaca sebagai satu benda yang bergerak.

   Blur tipisnya menggantikan motion blur yang tidak dimiliki peramban.
   Mesin gulungan sungguhan terlihat halus justru karena buram saat berputar;
   tanpa itu, deretan huruf yang tajam pada kecepatan berapa pun akan terlihat
   patah-patah. Dilepas begitu mendarat, jadi namanya tetap tajam saat dibaca. */
[data-design="mnj"] .provider-reel__strip.is-spinning {
  animation: mnj-reel-spin 1.25s linear infinite;
  filter: blur(.5px);
}

/* Buramnya luntur perlahan selama pendaratan, bukan hilang seketika saat
   kelas dilepas - pergantian tajam-buram yang mendadak sama menggangunya
   dengan gerakan yang patah. */
[data-design="mnj"] .provider-reel__strip {
  transition: filter 600ms ease-out;
  filter: blur(0);
}

@keyframes mnj-reel-spin {
  from { transform: translateY(0); }
  to { transform: translateY(var(--reel-shift, -260px)); }
}

[data-design="mnj"] .provider-reel__item {
  display: flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  color: var(--hud-blue-white, var(--hud-blue-white));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sudah mendarat: jendelanya berganti emas, warna yang di halaman ini selalu
   berarti "sudah jadi". Sengaja hanya warna - gulungan yang ikut memantul
   saat berhenti akan menggeser namanya dari tengah jendela. */
[data-design="mnj"] .provider-reel.is-landed .provider-reel__window {
  border-color: var(--hud-gold-bright);
  box-shadow: inset 0 0 14px rgba(var(--hud-gold-rgb), .28), 0 0 16px rgba(var(--hud-gold-rgb), .22);
}

[data-design="mnj"] .provider-reel.is-landed .provider-reel__item {
  color: var(--hud-gold-label);
}

@media (max-width: 767px) {
  /* bottom: 28px yang lama menaruh gulungan tepat di baris yang sama dengan
     lencana SISTEM TERHUBUNG - terukur keduanya mulai di 352px, jadi nama
     providernya tertimpa persis pada detik ia berhenti.
     Aturan ini ditulis SETELAH aturan desktop di berkas ini, jadi ia
     membatalkan calc(7% + 54px) di sana tanpa terlihat. Sekarang memakai
     dasar hitungan yang sama, hanya jaraknya sedikit lebih rapat karena
     lencana di layar sempit lebih pendek. */
  [data-design="mnj"] .provider-reel { bottom: calc(7% + 46px); gap: 8px; }
  [data-design="mnj"] .provider-reel__label { font-size: 8px; letter-spacing: .16em; }
  [data-design="mnj"] .provider-reel__window { height: 22px; min-width: 132px; }
  [data-design="mnj"] .provider-reel__item { height: 22px; font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Putarannya dimatikan, gulungannya tidak. Nama yang terpilih tetap
     ditampilkan - itu isinya, bukan hiasannya. */
  [data-design="mnj"] .provider-reel__strip.is-spinning { animation: none; }
}

/* ==========================================================================
   MODAL HASIL POLA MAIN — DISUSUN ULANG
   ==========================================================================
   Tiga hal yang membuatnya sulit dibaca, dan perbaikannya masing-masing:

   1. SATU ANGKA, DUA LABEL. Judul "Rekomendasi Bet" lalu di dalamnya kartu
      berlabel "Rentang Bet" berisi nominal - bertumpuk vertikal di dalam
      kotak sendiri. Sekarang satu baris: judul di kiri, nominal di kanan.
      Label kedua dan kotaknya dibuang seluruhnya.

   2. BLOK PERMAINAN TERLALU RENGGANG. Nama, provider, dan persentase duduk
      berjauhan sehingga terbaca sebagai tiga hal terpisah, padahal ketiganya
      keterangan satu game yang sama. Jaraknya dirapatkan.

   3. TOMBOL MENEPI KE KANAN. Ia satu-satunya tombol di baris itu; menepi
      hanya masuk akal kalau ada tombol lain di sebelahnya. Dipusatkan.

   Aturan di sini sengaja TIDAK diikat ke [data-design="mnj"]: strukturnya
   berubah di index.html yang dipakai semua tema, jadi tata letak dasarnya
   harus waras di mana pun. Yang berbau warna MNJ ditulis terpisah di bawah.
   ========================================================================== */

/* Berbentuk tombol, tapi BUKAN tombol.
   Bentuk tombol dipakai karena ia yang paling cepat dikenali mata sebagai
   "satu satuan yang berdiri sendiri" - dan itu persis yang dibutuhkan angka
   ini: ia bukan bagian dari daftar keterangan di atasnya, melainkan
   kesimpulan tersendiri.

   Karena itu tetap div dan p, tanpa cursor: pointer, tanpa perubahan saat
   disorot. Sesuatu yang berbentuk tombol tapi tidak melakukan apa-apa saat
   ditekan sudah cukup mengecewakan; jangan ditambah isyarat yang menjanjikan
   lebih banyak lagi. */
.result-bet-row {
  display: flex;
  width: min(100%, 280px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0 auto;
  padding: 11px 18px;
  border: 1px solid var(--color-border-gold, rgba(var(--hud-gold-rgb), .5));
  border-radius: 12px;
  background: rgba(4, 8, 16, .55);
  box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .08);
  text-align: center;
}

.result-bet-row h3 { margin: 0; }

.result-bet-value {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  /* Nominal bisa panjang ("Rp 500.000 – Rp 1.500.000"); dibiarkan patah di
     mana pun daripada mendorong lebar modalnya. */
  overflow-wrap: anywhere;
}

/* Tombol MAIN SEKARANG dipusatkan. */
.result-actions { justify-content: center; }

/* -- rapat: keterangan satu game jadi satu blok --------------------------- */
[data-design="mnj"] .result-selected-game { align-items: center; gap: 12px; }

[data-design="mnj"] .result-selected-copy { display: grid; gap: 3px; }

[data-design="mnj"] .result-selected-copy h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

[data-design="mnj"] .result-selected-copy > p {
  margin: 0;
  color: var(--hud-text-muted, #8ea3bb);
  font-size: 11px;
}

/* Persentase menempel langsung di bawah nama provider, bukan sebagai daftar
   berlabel dengan jarak tersendiri: dalam satu blok sesempit ini, kata
   "Persentase Aktif" dan angkanya lebih terbaca berdampingan. */
[data-design="mnj"] .result-selected-copy dl { margin: 2px 0 0; }

[data-design="mnj"] .result-selected-copy dl > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

[data-design="mnj"] .result-selected-copy dt {
  color: var(--hud-text-muted, #8ea3bb);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[data-design="mnj"] .result-selected-copy dd {
  margin: 0;
  color: var(--hud-blue-white, var(--hud-blue-white));
  font-size: 14px;
  font-weight: 900;
}

[data-design="mnj"] .result-selected-copy .game-maxwin { margin: 4px 0 0; }

/* Warna MNJ untuk panelnya: tepi emas tipis di atas bidang gelap, pola yang
   sama dengan tombol emas lain di halaman ini. */
[data-design="mnj"] .result-bet-row {
  border-color: rgba(var(--hud-gold-rgb), .55);
  background:
    linear-gradient(150deg, rgba(var(--hud-gold-rgb), .14), rgba(var(--hud-gold-deep-rgb), .05)),
    linear-gradient(150deg, rgba(17, 24, 39, .92), rgba(8, 12, 20, .96));
}

[data-design="mnj"] .result-bet-row h3 {
  color: var(--hud-text-muted, #8ea3bb);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

[data-design="mnj"] .result-bet-value {
  color: var(--hud-gold-bright, var(--hud-gold-bright));
  text-shadow: 0 0 14px rgba(var(--hud-gold-rgb), .3);
}

[data-design="mnj"] .result-actions .btn { flex: 0 1 220px; }

/* ==========================================================================
   ANIMASI DIJEDA SAAT TIDAK TERLIHAT
   ==========================================================================
   Diukur dengan menggulir di lebar 390px, CPU diperlambat empat kali:

     semua animasi menyala   56,0 ms per bingkai   66 dari 69 bingkai patah
     semua animasi dimatikan 16,7 ms per bingkai    0 dari 69 bingkai patah

   Seluruh patah-patahnya dari animasi. Dan kebanyakan animasi itu berjalan
   untuk kartu yang jauh di luar layar - peramban tetap menghitung dan
   menggambar tiap bingkainya walaupun tidak ada yang melihat.

   Kelasnya dipasang IntersectionObserver di offscreen-animations.js.

   Dipakai animation: none, BUKAN animation-play-state: paused. Mulanya saya
   memakai play-state dengan alasan ia membekukan lalu melanjutkan, bukan
   melompat ke awal. Diukur, alasan itu tidak ada gunanya: pada daftar elemen
   yang sama persis, play-state sama sekali tidak mengubah waktu bingkai
   (45,8 jadi 44,8 ms) sementara animation: none menurunkannya ke 20,3 ms.

   Sebabnya: animasi yang dijeda tetap membuat elemennya diperlakukan sebagai
   isi yang bisa berubah, jadi peramban tidak boleh menyimpannya di lapisan
   gulir yang bisa dipakai ulang. Yang mahal bukan detak animasinya,
   melainkan keberadaannya. Lompatan ke keadaan awal memang jadi harganya -
   dan pada elemen yang sedang tidak terlihat, tidak ada yang melihatnya.

   Aturannya tidak diikat ke [data-design="mnj"]: ini soal performa, dan tema
   mana pun yang menyusul nanti sama-sama membutuhkannya.
   ========================================================================== */

.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation: none !important;
}

/* -- tab yang sedang tidak dilihat ---------------------------------------
   Dipasang jedaSaatTabTersembunyi() di elemen <html>. Peramban memperlambat
   sebagian pekerjaan di tab latar, tapi animasi CSS bukan termasuk yang
   dihentikannya - cincin berputar, garis pemindai, paket data, sirkuit
   header, dan kilau kartu semuanya terus digambar untuk layar yang tidak ada
   orangnya. Di laptop itu terbaca sebagai kipas menyala dan baterai terkuras.

   Di sini dipakai animation-play-state, BUKAN animation: none seperti aturan
   is-offscreen di atas. Bedanya disengaja: elemen di luar layar boleh
   melompat ke keadaan awal karena memang tidak ada yang melihat saat itu,
   sedangkan seluruh halaman yang melompat serempak begitu tab dibuka lagi
   justru langsung tertangkap mata. play-state membekukan di posisinya lalu
   melanjutkan. */
.is-tab-tersembunyi,
.is-tab-tersembunyi *,
.is-tab-tersembunyi *::before,
.is-tab-tersembunyi *::after {
  animation-play-state: paused !important;
}

/* -- sapuan persentase dibuat murah --------------------------------------
   Diukur tersendiri: mematikan animasi persentase SAJA memangkas 56,0 ms
   menjadi 26,6 ms per bingkai - penyumbang terbesar tunggal. Penyebabnya dua
   properti yang dulu saya pasang di sini:

     filter: blur(.4px)        satu lintasan filter tiap bingkai, dikali dua
                               belas kartu sekaligus
     mix-blend-mode: screen    memaksa peramban membaca ulang piksel di
                               belakang elemen sebelum menggambar

   Keduanya dibuang. Yang tersisa gradien putih yang bergerak dengan
   transform dan opacity saja - dua properti yang ditangani penyusun grafis
   tanpa menggambar ulang apa pun. Cerahnya tidak berkurang: intinya tetap
   putih 92 persen, hanya tepinya sedikit lebih tegas tanpa buram.

   mix-blend-mode diwarisi dari components.css:113, jadi harus dinolkan
   secara tegas - bukan sekadar tidak ditulis ulang. */
[data-design="mnj"] .game-percentage--good .game-percentage__fill::before {
  filter: none;
  mix-blend-mode: normal;
}

/* -- hiasan dijeda SELAMA bergulir ----------------------------------------
   Melengkapi jeda-luar-layar di atas, dan menutup lubang yang tidak bisa
   ditutup olehnya: sirkuit berada di header yang selalu terlihat, jadi ia
   tidak pernah terjeda - padahal justru dialah penyumbang terbesar. Diukur
   tersendiri, mematikan sirkuit saja menurunkan waktu bingkai dari 42,2 ms
   ke 22,9 ms, di bawah seluruh sampel dasarnya.

   Yang dijeda hanya HIASAN. Daftar ini sengaja ditulis satu per satu, bukan
   memakai bintang, supaya tidak ada animasi yang MENYAMPAIKAN SESUATU ikut
   membeku saat member menggulir: urutan koneksi di foto hero, gulungan
   provider, dan lencana TERSEDIA harus tetap berjalan apa adanya.

   Kelas is-scrolling dipasang di elemen <html> oleh jedaSaatGulir(), dan
   dilepas 180 milidetik setelah gulir terakhir. */
.is-scrolling .circuit__pad,
.is-scrolling .circuit__led,
.is-scrolling .hero-orb,
.is-scrolling .hero-particles i,
.is-scrolling .brand,
.is-scrolling .hero-copy h1,
.is-scrolling .ai-powered-status__text,
.is-scrolling .ai-visual::before,
.is-scrolling .ai-visual::after,
.is-scrolling .popular-card--top .popular-thumb::before,
.is-scrolling .game-percentage__fill::before,
.is-scrolling .game-percentage__fill::after {
  animation: none !important;
}

/* ==========================================================================
   MOBILE — HIASAN YANG BERGERAK DIMATIKAN
   ==========================================================================
   Di layar sempit, membuka halaman dan menggulirnya lebih penting daripada
   hiasan yang bergerak. Ponsel kelas menengah menggambar ulang seluruh
   halaman saat digulir; tiap animasi yang masih hidup ikut bersaing di inti
   prosesor yang sama.

   Yang dimatikan HANYA yang tidak menyampaikan apa pun:

     .circuit__pad      menganimasikan `stroke`
     .circuit__led      menganimasikan `offsetDistance`
     .ai-visual::after  memutar conic-gradient bertopeng
     .hero-orb, partikel, kilau merek dan judul

   Dua yang pertama paling mahal karena propertinya tidak bisa ditangani
   penyusun grafis - peramban menggambar ulang tiap bingkai.

   Yang TETAP HIDUP di mobile, karena ketiganya menyampaikan keadaan, bukan
   menghias:
     - seluruh urutan koneksi di foto hero
     - gulungan provider
     - bar persentase pada game persentase tinggi
   ========================================================================== */

@media (max-width: 767px) {
  .circuit__pad,
  .circuit__led,
  .hero-orb,
  .hero-particles i,
  .brand,
  .hero-copy h1,
  .ai-powered-status__text,
  .ai-visual::before,
  .ai-visual::after,
  .popular-card--top .popular-thumb::before {
    animation: none !important;
  }

  /* Sisa pendarnya dibiarkan sebagai keadaan diam, bukan dihilangkan:
     yang dibuang geraknya, bukan cahayanya. */
  .ai-visual::before { opacity: .85; }
  .popular-card--top .popular-thumb::before { opacity: 0; }
}

/* ==========================================================================
   PERBAIKAN TATA LETAK — HASIL PEMERIKSAAN DI PONSEL
   ========================================================================== */

/* -- 1. tombol MAIN SEKARANG di modal hasil -------------------------------
   Terukur 251x220 piksel: tingginya 220, untuk satu baris tulisan. Ini bug
   saya sendiri. Aturan sebelumnya menulis `flex: 0 1 220px` dengan maksud
   membatasi LEBAR - dan itu benar selama barisnya menyamping. Di layar
   sempit .result-actions berubah jadi kolom, dan pada arah kolom flex-basis
   mengatur TINGGI. Angka yang sama, sumbu yang berbeda.

   Diganti lebar maksimum, yang artinya tidak pernah berubah mengikuti arah
   flex-nya. */
[data-design="mnj"] .result-actions .btn {
  flex: 0 1 auto;
  width: 100%;
  max-width: 220px;
  min-height: 44px;
}

/* -- 2. tombol POLA MAIN di modal koneksi dikembalikan ke ponsel ----------
   mnj-design.css:2194 menyembunyikannya di bawah 480px. Akibatnya di ponsel
   ketiga baris rekomendasi kehilangan satu-satunya penanda bahwa ia bisa
   ditekan - dan justru pola main itulah yang dicari member setelah
   terhubung.
   Yang benar bukan menyembunyikannya, melainkan mengecilkannya. */
@media (max-width: 480px) {
  .connect-pick__cta {
    display: inline-block;
    font-size: 8.5px;
    letter-spacing: .05em;
    white-space: nowrap;
  }
}

/* -- 3. nama provider dulu, baru jumlah permainan -------------------------
   Urutan di HTML dibiarkan apa adanya - jumlahnya lebih dulu di sana karena
   #result-count juga dibaca alat bantu sebagai ringkasan hasil. Yang diubah
   hanya urutan TAMPILAN lewat order, sehingga yang terbaca lebih dulu adalah
   nama providernya: itu yang menjawab "daftar apa ini", sedangkan jumlahnya
   keterangan tambahan.

   Keduanya dipusatkan di dalam satu papan, bukan didorong ke dua ujung. */
.result-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: min(100%, 320px);
  margin-inline: auto;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(4, 8, 16, .5);
  text-align: center;
}

.result-meta #active-filter-label { order: 1; }
.result-meta #result-count { order: 2; }

[data-design="mnj"] .result-meta #active-filter-label {
  color: var(--hud-gold-label);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

[data-design="mnj"] .result-meta #result-count {
  color: var(--hud-text-muted, #8ea3bb);
  font-size: 11px;
  font-weight: 700;
}

/* -- 4. carousel provider di ponsel: gradasi, bukan kotak ------------------
   Kotak bertepi memberi gambarnya sebuah batas, dan batas itu yang membuat
   gambar terbaca sebagai isi kotak - bukan sebagai gambar yang berdiri di
   halaman. Tepinya dibuang seluruhnya.

   Yang menggantikan: gradasi dari bawah ke atas. Bagian bawah pekat sebagai
   pijakan supaya gambar dan tulisannya punya dasar yang jelas, lalu memudar
   dan HABIS di sekitar 80 persen tingginya. Dua puluh persen teratas tidak
   berwarna sama sekali, jadi ia menyatu dengan latar halaman - dan kepala
   karakter di gambarnya seolah keluar dari kartunya.

   Digambar di ::before, bukan pada background elemennya, karena elemen itu
   juga membawa foto providernya; dua lapisan tidak bisa ditumpuk pada satu
   properti background tanpa saling menutupi. */
@media (max-width: 767px) {
  .provider-list .provider-button {
    border: 0;
    border-radius: 14px;
    background-color: transparent;
    /* Pendar biru samar pada kartu non-tengah ikut dibuang. Ia memang bukan
       garis, tapi ia menggambar batas kartu di udara - dan yang diminta
       justru kartunya menyatu dengan latar. */
    box-shadow: none !important;
    overflow: visible;
  }

  .provider-list .provider-button::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    /* 0% pekat di dasar, habis di 80%. Sisanya bening. */
    background: linear-gradient(
      to top,
      rgba(12, 20, 34, .92) 0%,
      rgba(12, 20, 34, .72) 34%,
      rgba(12, 20, 34, .3) 62%,
      transparent 80%);
    content: "";
    pointer-events: none;
  }

  /* Kartu tengah ditandai ATRIBUT data-slot="center", bukan kelas is-center.
     Itu yang dipasang provider-coverflow.js, dan aturan cincin birunya di
     mnj-design.css memakai selektor itu - berbobot lebih tinggi daripada
     dua kelas, jadi menulis .is-center di sini tidak menimpanya sama sekali.
     Cincin birunya terbaca persis seperti border, padahal border itulah yang
     diminta hilang. */
  .provider-list .provider-button[data-slot="center"] {
    border: 0;
    box-shadow: none;
  }

  /* Lencana AKTIF dilepas di ponsel juga - lingkaran dan garis empat sisi
     yang muncul saat kartu ditekan itu dia: ::before dengan content "AKTIF",
     terukur 54x119px, sudut 999px, bertepi emas. Ia dirancang menempel pada
     tepi bawah kartu BERKOTAK; sejak kotaknya dibuang ia melar jadi gumpalan.
     Aturan pelepasannya dulu hanya ada di dalam @media (min-width: 768px),
     jadi ponsel tidak pernah kebagian.

     PENTING: ::before di ponsel juga dipakai sebagai panel gradasi kartu -
     satu pseudo-element, dua tugas. Karena itu ia tidak boleh sekadar
     di-content:none; yang dilakukan adalah MENIMPA seluruh sifat lencananya
     lalu memasang gradasinya kembali. Selektornya menyertakan .active supaya
     bobotnya menyamai aturan lencana di baris 339, yang tanpa itu selalu
     menang.

     Keadaan terpilih tetap tersampaikan: kartunya membesar, gradasinya
     menghangat, dan aria-pressed tetap dipasang JavaScript untuk pembaca
     layar. */
  .provider-list .provider-button.active::before {
    inset: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: transparent;
    content: "";
    font-size: 0;
    transform: none;
    /* Gradasinya WAJIB ditulis ulang di sini. Aturan lencana memasang
       background: var(--hud-gold-ink) dengan bobot yang sama, jadi kalau baris ini tidak
       ada, kartu terpilih kehilangan gradasinya dan berubah jadi bidang
       hitam pekat. */
    background: linear-gradient(
      to top,
      rgba(12, 20, 34, .92) 0%,
      rgba(12, 20, 34, .72) 34%,
      rgba(12, 20, 34, .3) 62%,
      transparent 80%);
  }

  .provider-list .provider-button.active::after { content: none; }

  .provider-list .provider-button:focus-visible { outline: none; }

  .provider-list .provider-button[data-slot="center"]::before {
    background: linear-gradient(
      to top,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 26%, rgba(8, 12, 20, .95)) 0%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 14%, rgba(10, 14, 22, .74)) 34%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 6%, rgba(14, 18, 28, .32)) 62%,
      transparent 80%);
    box-shadow: inset 0 -1px 0 rgba(var(--hud-gold-rgb), .5);
  }
}

/* ==========================================================================
   MESIN VERIFIKASI DI MODAL POLA
   ==========================================================================
   Menggantikan jaringan lima titik. Keberatan atasnya tepat: lima cahaya yang
   menyala bergantian tidak menceritakan apa pun - ia hanya bergerak.

   Yang menggantikannya punya alur yang bisa dibaca tanpa penjelasan:

     gir berputar   -> ada yang sedang dikerjakan
     pintu membuka  -> pekerjaannya selesai
     cap berhasil   -> hasilnya sah

   Bilah 0-100% sengaja TIDAK dipakai walaupun sempat diusulkan. Ia pernah ada
   di modal ini dan dibuang justru karena angkanya digerakkan timer, bukan oleh
   servernya: ia selalu sampai 100% apa pun yang terjadi di sisi sana. Gir
   tidak mengaku mengukur apa-apa, jadi ia tidak bisa berbohong.

   Seluruh iramanya memakai --durasi-loading yang dipasang JavaScript dari
   TOTAL_MS. Tidak ada durasi yang ditulis dua kali di dua berkas berbeda -
   masalah yang sudah dua kali muncul di berkas ini.
   ========================================================================== */

.loading-machine { display: none; }

[data-design="mnj"] .loading-machine {
  position: absolute;
  display: block;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* -- gir ------------------------------------------------------------------
   Gerigi digambar oleh stroke-dasharray pada satu lingkaran: garis tebal yang
   putus-putus, dilihat dari jauh, adalah gerigi. Satu elemen, bukan dua belas
   jalur - dan yang dianimasikan hanya rotate. */
[data-design="mnj"] .loading-gear {
  position: absolute;
  /* Di atas pintu, di bawah cap. */
  z-index: 2;
  transform-origin: 50% 50%;
}

/* Tebal dan berdimensi tanpa satu pun elemen tambahan di luar SVG-nya.
   Caranya dua lingkaran bertumpuk pada jari-jari yang sama:

     .loading-gear__tepi   stroke lebih tebal, warna gelap  -> jadi GARIS LUAR
     .loading-gear__gigi   stroke lebih tipis, warna terang -> jadi BADANnya

   Karena keduanya memakai stroke-dasharray yang sama, gerigi keduanya
   sejajar sempurna, dan yang gelap menyembul beberapa piksel di kedua sisi
   yang terang. Itulah yang dibaca mata sebagai ketebalan.

   Menambah lebar stroke saja tidak menghasilkan efek ini - yang didapat
   hanya gerigi yang lebih gemuk, tetap rata tanpa tepi. */
[data-design="mnj"] .loading-gear__tepi {
  stroke: #05080f;
}

[data-design="mnj"] .loading-gear__gigi {
  stroke: rgba(var(--hud-cyan-rgb), .72);
}

[data-design="mnj"] .loading-gear__hub {
  stroke: rgba(215, 245, 255, .9);
}

/* Bayangan jatuh sedikit ke bawah - satu arah cahaya yang tetap - sehingga
   girnya terbaca terangkat dari bidang di belakangnya, bukan tercetak rata
   di atasnya. drop-shadow, bukan box-shadow: yang ini mengikuti bentuk
   gerigi, yang itu akan menggambar kotak. */
[data-design="mnj"] .loading-gear {
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, .55))
    drop-shadow(0 4px 7px rgba(0, 0, 0, .5))
    drop-shadow(0 0 7px rgba(var(--hud-cyan-rgb), .32));
}

[data-design="mnj"] .loading-gear--kecil {
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, .55))
    drop-shadow(0 4px 7px rgba(0, 0, 0, .5))
    drop-shadow(0 0 7px rgba(var(--hud-gold-rgb), .34));
}

[data-design="mnj"] .loading-gear--besar {
  top: 22%;
  left: 16%;
  width: 46%;
  height: 46%;
  animation:
    mnj-gir-maju var(--durasi-gir, 2.6s) linear infinite,
    mnj-gir-menyingkir var(--durasi-loading, 4.6s) cubic-bezier(.55, 0, .3, 1) forwards;
}

[data-design="mnj"] .loading-gear--kecil {
  top: 42%;
  left: 46%;
  width: 38%;
  height: 38%;
  animation:
    mnj-gir-mundur var(--durasi-gir, 2.6s) linear infinite,
    mnj-gir-menyingkir var(--durasi-loading, 4.6s) cubic-bezier(.55, 0, .3, 1) forwards;
}

[data-design="mnj"] .loading-gear--kecil .loading-gear__gigi { stroke: rgba(var(--hud-gold-rgb), .78); }

@keyframes mnj-gir-maju { to { rotate: 360deg; } }
@keyframes mnj-gir-mundur { to { rotate: -360deg; } }

/* Girnya menyingkir SEBELUM pintunya dibuka, lalu ada jeda kosong di antara
   keduanya. Jeda itu yang membuat urutannya terbaca sebagai tiga kejadian
   terpisah - mesin selesai, dinyatakan sah, pintu dibuka - bukan tiga hal
   yang kebetulan terjadi berbarengan.

   Waktunya: menyingkir 72-82 persen, DIAM 82-88 persen, pintu bergerak mulai
   88 persen.

   Dianimasikan lewat properti `scale` dan `translate` tersendiri, bukan
   `transform`. Alasannya wajib: putarannya sudah memakai `rotate`, dan dua
   animasi tidak bisa menulis ke properti `transform` yang sama - yang kedua
   akan membatalkan yang pertama. Properti terpisah membuat keduanya
   bertumpuk, bukan bertabrakan. */
@keyframes mnj-gir-menyingkir {
  0%, 72% { opacity: 1; scale: 1; translate: 0 0; }
  82%, 100% { opacity: 0; scale: .55; translate: 0 26%; }
}

/* -- pintu ----------------------------------------------------------------
   Dua daun menutup seluruh bidang, lalu menggeser keluar pada 72 persen
   putaran dan tetap terbuka sampai akhir. Menggeser dengan translate, bukan
   mengecilkan lebar: mengubah lebar memaksa perhitungan tata letak tiap
   bingkai, sementara translate tidak. */
[data-design="mnj"] .loading-door {
  position: absolute;
  /* Paling belakang. Girnya berputar DI ATAS pintu yang masih tertutup, dan
     saat pintunya menggeser ia lewat di belakang mesin - bukan menutupinya. */
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 54%;
  background: linear-gradient(180deg, rgba(18, 27, 44, .97), rgba(8, 12, 20, .99));
  /* Tepi dalamnya dipatahkan, bukan lurus. Sudut-sudut miring yang berselang
     inilah bahasa antarmuka gim - garis lurus terbaca seperti panel kantor.
     Dipakai clip-path, jadi bentuknya tidak menambah satu elemen pun. */
  clip-path: polygon(
    0 0, 100% 0, 100% 14%, 86% 26%, 100% 38%,
    86% 52%, 100% 64%, 86% 78%, 100% 88%, 100% 100%, 0 100%);
  /* drop-shadow mengikuti siluet hasil clip-path; box-shadow akan menggambar
     persegi panjang dan mengkhianati bentuknya. */
  filter: drop-shadow(2px 0 6px rgba(var(--hud-cyan-rgb), .45));
  animation: mnj-pintu-kiri var(--durasi-loading, 4.6s) cubic-bezier(.62, 0, .2, 1) forwards;
}

[data-design="mnj"] .loading-door--kiri { left: 0; }

[data-design="mnj"] .loading-door--kanan {
  right: 0;
  clip-path: polygon(
    100% 0, 0 0, 0 14%, 14% 26%, 0 38%,
    14% 52%, 0 64%, 14% 78%, 0 88%, 0 100%, 100% 100%);
  filter: drop-shadow(-2px 0 6px rgba(var(--hud-cyan-rgb), .45));
  animation-name: mnj-pintu-kanan;
}

/* Pintunya baru bergerak SETELAH capnya muncul. Urutannya: gir bekerja,
   verifikasi dinyatakan berhasil, baru pintunya dibuka - bukan sebaliknya.
   Membuka pintu sebelum hasilnya dinyatakan sama saja mengumumkan sebelum
   memeriksa. */
@keyframes mnj-pintu-kiri {
  0%, 88% { transform: translateX(0); }
  100% { transform: translateX(-104%); }
}

@keyframes mnj-pintu-kanan {
  0%, 88% { transform: translateX(0); }
  100% { transform: translateX(104%); }
}

/* -- cap berhasil ---------------------------------------------------------
   Muncul setelah pintunya lewat separuh jalan, dengan sedikit lonjakan skala
   supaya terbaca sebagai stempel yang ditekan - bukan tulisan yang memudar
   masuk. */
[data-design="mnj"] .loading-stamp {
  position: absolute;
  /* Paling depan: ia yang dibaca, dan ia harus tetap terlihat saat pintunya
     menggeser lewat di belakangnya. */
  z-index: 3;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--hud-green, #39e58c);
  border-radius: 8px;
  background: rgba(5, 20, 14, .9);
  color: var(--hud-green, #39e58c);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  animation: mnj-cap-berhasil var(--durasi-loading, 4.6s) cubic-bezier(.2, 1.5, .4, 1) forwards;
}

/* Muncul pada 66 persen - sebelum pintunya bergerak di 84 persen. Itu
   urutan yang diminta dan urutan yang masuk akal: dinyatakan berhasil dulu,
   baru pintunya dibuka. */
@keyframes mnj-cap-berhasil {
  0%, 64% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); }
  80%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Garis pemindai dan cincin ikut berhenti begitu pintunya terbuka - keduanya
   menandakan "sedang diproses", dan prosesnya sudah selesai. */
[data-design="mnj"] .loading-scanline,
[data-design="mnj"] .loading-ring {
  animation-duration: var(--durasi-gir, 2.6s);
}

/* -- 5. kartu carousel ponsel: sudut siku + latar hanya di kartu utama -----
   Tiga hal sekaligus, dan ketiganya menjawab satu keluhan yang sama: kartu
   yang saling bertabrakan.

   a. TEPI HANYA DI EMPAT SUDUT, bukan mengelilingi. Garis penuh mengurung
      gambarnya; empat siku menandai wilayahnya tanpa mengurung. Digambar
      sebagai delapan lapisan background pada satu pseudo-element - dua
      lengan per sudut - jadi tidak ada satu pun elemen tambahan di HTML.

   b. LATAR HANYA DI KARTU UTAMA. Sebelumnya semua kartu punya gradasi, dan
      di ponsel kartu-kartu itu berdempetan sehingga gradasinya bersambung
      jadi satu pita gelap panjang - batas antar kartu justru hilang. Sekarang
      hanya kartu tengah yang punya pijakan; tetangganya melayang di atas
      latar halaman.

   c. Gradasinya tetap: pekat di dasar, habis di 80 persen, 20 persen teratas
      bening - itu yang membuat karakter di gambarnya seolah keluar dari
      kartu.
   ========================================================================== */

@media (max-width: 767px) {
  /* (b) tetangga kartu utama tidak punya latar sama sekali. */
  .provider-list .provider-button::before,
  .provider-list .provider-button.active::before {
    background: none;
  }

  /* Kartu utama - dan hanya dia - yang berpijak.
     Ditulis dengan .active ikut disebut supaya bobotnya tidak kalah oleh
     aturan lencana yang juga memakai .active. */
  .provider-list .provider-button[data-slot="center"]::before,
  .provider-list .provider-button[data-slot="center"].active::before {
    background: linear-gradient(
      to top,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 24%, rgba(8, 12, 20, .95)) 0%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 12%, rgba(10, 14, 22, .74)) 34%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 6%, rgba(14, 18, 28, .32)) 62%,
      transparent 80%);
  }

  /* Tidak ada siku, tidak ada garis. Empat siku sempat dipasang di sini
     dan hasilnya tetap terbaca sebagai bingkai - hanya bingkai yang bolong
     di tengah sisinya. Yang membedakan kartu satu dari yang lain sekarang
     cukup latarnya: kartu utama berpijak, tetangganya tidak.

     ::after dimatikan sepenuhnya, termasuk kilau melintas bawaan
     components.css:34 yang memakai pseudo-element yang sama. Kedua :not()
     disertakan supaya bobotnya menyamai aturan di sana; tanpa itu kilaunya
     tetap hidup di kartu yang belum terpilih. */
  .provider-list .provider-button:not(.is-all-providers):not(.is-image-error)::after,
  .provider-list .provider-button.active::after {
    content: none;
  }
}

/* ==========================================================================
   CAROUSEL PONSEL — PERBAIKAN SETELAH DIPERIKSA ULANG
   ==========================================================================
   Dua laporan yang benar, dan dua-duanya bukan di tempat yang saya sangka.

   1. SIKU YANG MASIH ADA bukan pseudo-element. Ia elemen sungguhan di HTML:
      empat <i> berukuran 10x10px dengan border 2px emas, anak dari
      <span class="provider-corner">. Selama ini saya mematikan ::before dan
      ::after berkali-kali, dan tidak satu pun menyentuh elemen ini - karena
      memang bukan itu bendanya. Di desktop ia sudah dilepas sejak lama, tapi
      aturannya ditulis di dalam blok desktop saja.

   2. GRADASI YANG TIDAK MUNCUL disebabkan satu aturan tanpa media query:

        [data-design="mnj"] .provider-list .provider-button:not(.active)::before
          { content: none; }

      Bobotnya (0,4,1), sementara aturan gradasi ponsel saya (0,2,1). Jadi
      untuk SETIAP kartu yang belum terpilih - yaitu hampir semuanya -
      ::before tidak pernah dibuat sama sekali, dan gradasi apa pun yang
      ditulis di dalamnya tidak punya tempat untuk digambar. Bukan warnanya
      yang salah; elemennya yang tidak ada.
   ========================================================================== */

@media (max-width: 767px) {
  /* (1) siku fisik dilepas. */
  .provider-list .provider-corner,
  .provider-list .provider-corner i { display: none; }

  /* (2) ::before dihidupkan kembali dengan bobot yang menyamai aturan
     :not(.active) di atas, lalu diisi gradasi.

     SETIAP kartu dapat panelnya, bukan hanya yang tengah - itu yang dipakai
     menu provider Manjabet sendiri: tiap petak punya bidang gelap di belakang
     artworknya, dan justru bidang itu yang memisahkan satu petak dari
     tetangganya. Kekhawatiran saya sebelumnya - bahwa gradasinya akan
     menyatu jadi satu pita panjang - tidak terjadi karena tiap panel punya
     sudut membulat dan ada celah di antaranya. */
  [data-design="mnj"] .provider-list .provider-button::before,
  [data-design="mnj"] .provider-list .provider-button:not(.active)::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(
      to top,
      rgba(14, 20, 32, .95) 0%,
      rgba(16, 22, 34, .78) 38%,
      rgba(20, 26, 38, .4) 64%,
      transparent 82%);
    color: transparent;
    content: "";
    font-size: 0;
    pointer-events: none;
    transform: none;
  }

  /* Kartu utama: panel yang sama, hanya menghangat ke emas - penanda
     terpilih tanpa menambah bentuk apa pun. */
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"]::before,
  [data-design="mnj"] .provider-list .provider-button[data-slot="center"]:not(.active)::before {
    background: linear-gradient(
      to top,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 24%, rgba(8, 12, 20, .96)) 0%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 15%, rgba(10, 14, 22, .8)) 38%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 8%, rgba(14, 18, 28, .42)) 64%,
      transparent 82%);
  }
}

/* ==========================================================================
   PAPAN "PROVIDER + JUMLAH PERMAINAN" — SATU BARIS, TERPUSAT
   ==========================================================================
   Sebelumnya keduanya ditumpuk dua baris dengan ukuran huruf berbeda, dan itu
   membuatnya terbaca sebagai dua keterangan terpisah. Padahal keduanya satu
   kalimat: "provider ini, sekian permainan" - dan kalimat itu yang memberi
   tahu daftar di bawahnya milik siapa.

   Satu baris, huruf sama besar, dipisah satu titik tengah. Yang membedakan
   hanya warnanya: nama providernya emas karena itu yang dicari mata lebih
   dulu, jumlahnya diredupkan karena ia keterangan tambahan. Ukuran dan
   ketebalannya sengaja identik supaya keduanya terbaca satu tarikan napas.
   ========================================================================== */

.result-meta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 9px;
  padding: 10px 16px;
}

/* Titik pemisah. Dibuat dari pseudo-element pada jumlahnya, bukan ditulis di
   HTML, supaya ia ikut hilang sendiri kalau salah satu sisinya kosong. */
[data-design="mnj"] .result-meta #result-count::before {
  margin-right: 9px;
  color: rgba(255, 255, 255, .28);
  content: "•";
}

[data-design="mnj"] .result-meta #active-filter-label,
[data-design="mnj"] .result-meta #result-count {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
}

[data-design="mnj"] .result-meta #active-filter-label { color: var(--hud-gold-label); }
[data-design="mnj"] .result-meta #result-count { color: var(--hud-text-muted, #8ea3bb); }

@media (max-width: 767px) {
  [data-design="mnj"] .result-meta #active-filter-label,
  [data-design="mnj"] .result-meta #result-count { font-size: 12px; }
}

/* ==========================================================================
   TOMBOL MAIN — LAPISAN WARNA DI ::after
   ==========================================================================
   Tombol ini kehilangan ::after-nya sejak cincin berputar dibuang, dan yang
   tersisa hanya bidang gelap dengan garis tepi tipis. Di tema emas itu masih
   terbaca karena emas sendiri sudah hangat; di tema ungu dan merah tombolnya
   jadi terlihat kosong - ada bentuknya, tidak ada warnanya.

   Yang dikembalikan bukan cincinnya, hanya WARNANYA: satu lapisan tipis
   berisi semburat warna tema yang menguat ke arah dasar tombol, ditambah
   garis terang setebal satu piksel di bibir atas. Diam, tanpa animasi -
   keberatan lama tentang cincin berputar tetap berlaku.

   Ditaruh di ::after karena ::before pada tombol ini sudah dipakai kilau
   bawaan, dan menumpuk dua peran pada satu pseudo-element adalah persoalan
   yang sudah dua kali muncul di berkas ini.
   ========================================================================== */

[data-design="mnj"] .card-actions .game-play-link,
[data-design="mnj"] .popular-actions .popular-play {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Keempat offset WAJIB dinolkan di sini.
     .popular-play lahir sebagai pil melayang di atas foto - position:absolute
     dengan left: 50% dan transform: translate(-50%, 0) yang menariknya
     kembali ke tengah. Saat dipindah ke baris aksi ia dibuat static, dan
     pada elemen static nilai left diabaikan sehingga tidak terasa.
     Begitu ia dijadikan relative demi lapisan ::after ini, left: 50% hidup
     lagi - sementara transform penariknya sudah dinolkan. Akibatnya tombol
     tergeser 109px ke kanan dan menjulur keluar kartu, menimpa kartu
     sebelahnya. */
  inset: auto;
}

[data-design="mnj"] .card-actions .game-play-link::after,
[data-design="mnj"] .popular-actions .popular-play::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  /* Warna tema DICAMPUR ke bidang gelap, bukan ditumpuk di atasnya dengan
     alpha rendah. Bedanya menentukan: warna terang seperti lime, pada alpha
     .26 sekalipun, tetap menaikkan kecerahan bidang sampai teks pucat di
     atasnya lenyap - terukur kontrasnya 1,43 dari ambang baca 4,5. Dengan
     color-mix, kegelapan bidangnya tetap berapa pun terangnya warna tema. */
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 30%, rgba(8, 12, 20, .95)) 0%,
      color-mix(in srgb, rgb(var(--hud-gold-rgb)) 14%, rgba(8, 12, 20, .82)) 46%,
      transparent 88%);
  box-shadow: inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .26);
  content: "";
  pointer-events: none;
  transition: background var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="mnj"] .card-actions .game-play-link:hover::after,
  [data-design="mnj"] .popular-actions .popular-play:hover::after {
    background:
      linear-gradient(
        to top,
        color-mix(in srgb, rgb(var(--hud-gold-rgb)) 52%, rgba(8, 12, 20, .95)) 0%,
        color-mix(in srgb, rgb(var(--hud-gold-bright-rgb)) 28%, rgba(8, 12, 20, .85)) 46%,
        transparent 88%);
  }
}

/* ==========================================================================
   SEDANG RAMAI — DUA TOMBOL DIBUAT SETARA
   ==========================================================================
   Terukur, keduanya sudah sama besar (177x34 di desktop, 133x30 di ponsel)
   dan tidak ada tulisan yang meluber. Yang membuatnya terlihat berantakan
   bukan ukurannya, melainkan KETIMPANGANNYA:

     POLA MAIN  isolation: auto   ::after tidak ada   -> bidangnya rata
     MAIN       isolation: isolate ::after bergradien -> bidangnya berisi

   Lapisan warna di ::after tadi hanya saya pasang pada tombol MAIN, jadi
   berdampingan keduanya terbaca seperti dua tombol dari rancangan berbeda.

   Sekarang POLA MAIN dapat perlakuan yang sama persis, hanya memakai warna
   PENYERTA - biru di Manjabet, putih di Slot Gembira, lime di Semesta88 -
   sementara MAIN tetap warna dominan. Bentuknya kembar, perannya tetap
   terbaca dari warnanya.
   ========================================================================== */

[data-design="mnj"] .popular-actions .popular-pattern {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-design="mnj"] .popular-actions .popular-pattern::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    color-mix(in srgb, rgb(var(--hud-blue-rgb)) 26%, rgba(8, 12, 20, .95)) 0%,
    color-mix(in srgb, rgb(var(--hud-blue-rgb)) 12%, rgba(8, 12, 20, .82)) 46%,
    transparent 88%);
  box-shadow: inset 0 1px 0 rgba(var(--hud-blue-rgb), .2);
  content: "";
  pointer-events: none;
  transition: background var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="mnj"] .popular-actions .popular-pattern:hover::after {
    background: linear-gradient(
      to top,
      color-mix(in srgb, rgb(var(--hud-blue-rgb)) 48%, rgba(8, 12, 20, .95)) 0%,
      color-mix(in srgb, rgb(var(--hud-cyan-rgb)) 24%, rgba(8, 12, 20, .85)) 46%,
      transparent 88%);
  }
}

/* Tanda bintang pada POLA MAIN diberi lebar tetap supaya kedua tombol punya
   sisa ruang tulisan yang sama - tanpa ini, tulisan yang satu duduk beberapa
   piksel lebih ke kanan daripada tetangganya. */
[data-design="mnj"] .popular-actions .popular-pattern > span[aria-hidden] {
  width: 11px;
  text-align: center;
}

/* ==========================================================================
   TEPI DAN SOROT TOMBOL — WARNA TERSENDIRI
   ==========================================================================
   Seluruh halaman berlatar gelap. Warna dominan yang sudah digelapkan cukup
   sebagai BIDANG, tapi lemah sebagai GARIS - dan lebih lemah lagi sebagai
   tanda "sedang disorot", karena yang berubah cuma kecerahannya sedikit.

   Dua peran dipisahkan:

     --hud-tepi-rgb    garis tepi. Boleh berbeda dari warna dominan; di tema
                       merah justru putih yang membuat tombolnya terbaca.
     --hud-sorot-rgb   saat disorot. Warna KETIGA, bukan versi terang dari
                       dominan - perubahan rona tertangkap mata jauh lebih
                       cepat daripada perubahan kecerahan.

       MNJ  tepi emas    sorot emas terang
       SLG  tepi putih   sorot merah cerah
       SE8  tepi lime    sorot magenta terang

   Aturannya ditaruh paling akhir supaya menimpa warna tepi dan sorot yang
   ditulis lebih dulu di berkas ini, tanpa perlu menyunting satu per satu.
   ========================================================================== */

[data-design="mnj"] .card-actions .game-play-link,
[data-design="mnj"] .popular-actions .popular-play,
[data-design="mnj"] .popular-actions .popular-pattern,
[data-design="mnj"] .game-card .card-actions .generate-game {
  border-color: rgba(var(--hud-tepi-rgb), .5);
  transition:
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  /* Disorot: tepinya menyala penuh, isinya berganti rona, dan pendarnya
     memakai warna yang sama supaya seluruh tombol terbaca sebagai satu
     benda yang menyala - bukan garis dan bidang yang kebetulan berubah
     bersamaan. */
  [data-design="mnj"] .card-actions .game-play-link:hover,
  [data-design="mnj"] .popular-actions .popular-play:hover,
  [data-design="mnj"] .popular-actions .popular-pattern:hover,
  [data-design="mnj"] .game-card .card-actions .generate-game:hover:not(:disabled) {
    border-color: rgb(var(--hud-sorot-rgb));
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .24),
      0 0 18px rgba(var(--hud-sorot-rgb), .42);
  }

  [data-design="mnj"] .card-actions .game-play-link:hover::after,
  [data-design="mnj"] .popular-actions .popular-play:hover::after,
  [data-design="mnj"] .popular-actions .popular-pattern:hover::after {
    background: linear-gradient(
      to top,
      color-mix(in srgb, rgb(var(--hud-sorot-rgb)) 58%, rgba(8, 12, 20, .95)) 0%,
      color-mix(in srgb, rgb(var(--hud-sorot-rgb)) 28%, rgba(8, 12, 20, .85)) 46%,
      transparent 88%);
  }

  /* POLA MAIN di grid tidak punya lapisan ::after; bidangnya sendiri yang
     berganti rona. */
  [data-design="mnj"] .game-card .card-actions .generate-game:hover:not(:disabled) {
    background: linear-gradient(
      to top,
      color-mix(in srgb, rgb(var(--hud-sorot-rgb)) 46%, rgba(8, 12, 20, .95)) 0%,
      color-mix(in srgb, rgb(var(--hud-sorot-rgb)) 20%, rgba(8, 12, 20, .85)) 100%);
  }
}

[data-design="mnj"] .card-actions .game-play-link:active,
[data-design="mnj"] .popular-actions .popular-play:active,
[data-design="mnj"] .popular-actions .popular-pattern:active,
[data-design="mnj"] .game-card .card-actions .generate-game:active:not(:disabled) {
  border-color: rgb(var(--hud-sorot-rgb));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}


/* ==========================================================================
   GESER TEGAK FOTO HERO — PER TEMA
   ==========================================================================
   Seluruh koordinat animasi koneksi di connection-fx.css diukur dari SATU
   foto: milik Manjabet. Garis energi, inti, dan scanner semuanya memakai
   persen terhadap kotak foto, jadi selama fotonya berganti dengan cincin RTP
   di ketinggian berbeda, animasinya meleset - bukan karena animasinya salah,
   melainkan karena patokannya foto yang lain.

   Ada dua cara memperbaiki: menggeser animasinya, atau menggeser fotonya.
   Yang dipilih menggeser FOTO, karena animasinya satu kesatuan berisi lima
   elemen yang saling berhubungan - memindahkannya berarti menyetel ulang
   semuanya dan menjaga hubungannya tetap benar. Fotonya cuma satu angka.

   Bawaannya 0: Manjabet dan Slot Gembira tidak bergeser sama sekali.
   ========================================================================== */

[data-design="mnj"] .ai-visual-media {
  transform: translate(-50%, calc(-50% + var(--fx-foto-geser-y, 0%)));
}

/* ==========================================================================
   DAFTAR LANGKAH DI POLA MAIN — DIBUAT TERBACA
   ==========================================================================
   Terukur, kontrasnya sebenarnya sudah lolos ambang baca: 6,3 sampai 17,03.
   Jadi yang membuatnya terasa redup bukan warnanya, melainkan dua hal lain:

     1. UKURANNYA. Keterangan langkah 10px dan baris syarat 9px - di bawah
        ukuran yang nyaman dibaca untuk kalimat penuh, bukan sekadar label.
     2. SATU BARIS MEMAKAI ABU-ABU NETRAL. .pattern-step-condition memakai
        #8e96a7 yang tidak ada hubungannya dengan tema mana pun, jadi ia
        terbaca seperti catatan kaki yang dimatikan - padahal isinya justru
        syarat lanjut yang paling perlu dipatuhi.

   Ukurannya dinaikkan, dan barisnya diikat ke warna tema.
   ========================================================================== */

[data-design="mnj"] #engine-result-pattern-steps li {
  border-color: rgba(var(--hud-tepi-rgb), .3);
  background: rgba(9, 14, 26, .92);
}

/* Judul langkah. */
[data-design="mnj"] #engine-result-pattern-steps li h4 > span:last-child {
  font-size: 13px;
  letter-spacing: .01em;
}

/* Nomor langkah dan takaran spin - keduanya angka, jadi diberi warna dominan
   supaya terbaca sebagai ukuran, bukan sebagai kalimat. */
[data-design="mnj"] #engine-result-pattern-steps li > span:first-child {
  color: rgb(var(--hud-sorot-rgb));
  font-size: 13px;
}

[data-design="mnj"] #engine-result-pattern-steps li small {
  color: rgba(var(--hud-tepi-rgb), .92);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Kalimat keterangan - ini yang benar-benar dibaca, jadi ia yang paling
   terang dan paling besar di antara teks kecil. */
[data-design="mnj"] #engine-result-pattern-steps li p {
  color: #eef2fb;
  font-size: 11.5px;
  line-height: 1.5;
}

/* Baris syarat. Diberi tanda kutip tegak di kiri dan warna tema, bukan
   abu-abu netral: ia bukan catatan kaki, ia syarat untuk lanjut.

   Selektornya WAJIB menyertakan #engine-result-pattern-steps. Baris ini juga
   sebuah <p>, jadi ia ikut terkena aturan p di atas yang berbobot (1,1,1)
   karena memuat ID - dan aturan berbobot (0,2,0) tidak akan pernah
   menimpanya betapa pun ia ditulis belakangan. Terukur: barisnya tetap
   11,5px putih, bukan 10,5px berwarna tema. */
[data-design="mnj"] #engine-result-pattern-steps li p.pattern-step-condition {
  margin-top: 5px;
  padding-left: 8px;
  border-left: 2px solid rgba(var(--hud-sorot-rgb), .6);
  color: rgba(var(--hud-tepi-rgb), .88);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 767px) {
  [data-design="mnj"] #engine-result-pattern-steps li p { font-size: 11px; }
  [data-design="mnj"] .pattern-step-condition { font-size: 10px; }
}

/* ==========================================================================
   HUBUNGKAN — PENDAR DAN SOROTAN IKUT TEMA
   ==========================================================================
   Pendar di ::before masih memakai satu nilai sian yang dipaku
   (rgba(64, 224, 255, .68)) sebagai titik paling terang, jadi di tema merah
   dan ungu tombol utamanya tetap bercahaya biru - satu-satunya bagian
   halaman yang belum ikut berpindah warna.

   Sekarang keduanya memakai warna PENYERTA, sama seperti tombol POLA MAIN:
   biru di Manjabet, putih di Slot Gembira, lime di Semesta88.

   Sorotannya disamakan persis dengan tombol pola main - warna SOROT, yaitu
   warna ketiga yang tidak dipakai di tempat lain pada tema itu. Tombol
   terpenting di halaman ini pantas memberi umpan balik yang paling tegas,
   dan menyamakannya berarti member cukup belajar satu bahasa warna.
   ========================================================================== */

[data-design="mnj"] #generator-form .btn-generate::before {
  background: radial-gradient(
    118% 172% at 50% 134%,
    rgba(var(--hud-cyan-rgb), .68) 0%,
    rgba(var(--hud-blue-rgb), .34) 34%,
    rgba(var(--hud-blue-rgb), .10) 54%,
    transparent 70%
  );
}

@media (hover: hover) and (pointer: fine) {
  [data-design="mnj"] #generator-form .btn-generate:hover:not(:disabled) {
    border-color: rgb(var(--hud-sorot-rgb));
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .24),
      0 0 20px rgba(var(--hud-sorot-rgb), .45);
  }

  /* Pendarnya ikut berganti rona, bukan sekadar menguat - itu yang membuat
     sentuhan langsung terbaca di tema seterang apa pun. */
  [data-design="mnj"] #generator-form .btn-generate:hover:not(:disabled)::before {
    background: radial-gradient(
      118% 172% at 50% 134%,
      rgba(var(--hud-sorot-rgb), .82) 0%,
      rgba(var(--hud-sorot-rgb), .44) 34%,
      rgba(var(--hud-sorot-rgb), .14) 54%,
      transparent 70%
    );
  }
}

/* Saat sedang menghubungkan, pendarnya TIDAK ikut warna sorot - keadaan itu
   punya warnanya sendiri di connection-fx.css, dan menimpanya di sini akan
   membuat tombol terlihat seperti sedang disorot padahal sedang bekerja. */
[data-design="mnj"] #generator-form .btn-generate[data-connection-state]:hover::before {
  background: radial-gradient(
    118% 172% at 50% 134%,
    rgba(var(--hud-cyan-rgb), .68) 0%,
    rgba(var(--hud-blue-rgb), .34) 34%,
    rgba(var(--hud-blue-rgb), .10) 54%,
    transparent 70%
  );
}

/* ==========================================================================
   TOMBOL HUBUNGKAN — GRADIEN PENUH BERTEMA DAN HOVER YANG TEGAS
   ==========================================================================
   Latar lamanya #101a2b → #06090f: navy nyaris hitam yang dipaku, sama di
   semua tema. Warna temanya cuma muncul di garis tepi, jadi tombol utama di
   SLG dan SE8 tetap terlihat seperti tombol milik tema navy.

   Sekarang gradiennya dibangun dari warna tema itu sendiri, dicampur ke bidang
   gelap lewat color-mix: kegelapannya tetap milik tombol, warnanya milik tema.
   Bagian atas paling pekat warnanya dan meluruh ke bawah - arah yang sama
   dengan cahaya jatuh, sehingga tombolnya terbaca cembung.
   ========================================================================== */

[data-design="mnj"] #generator-form .btn-generate {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, rgb(var(--hud-gold-rgb)) 62%, #0b0f18) 0%,
    color-mix(in srgb, rgb(var(--hud-gold-deep-rgb)) 58%, #080b12) 52%,
    color-mix(in srgb, rgb(var(--hud-gold-dark-rgb)) 40%, #05070c) 100%
  );
}

/* Hover: warnanya naik tajam, bukan sekadar sedikit lebih terang. Perbedaan
   yang terlalu halus membuat orang ragu apakah tombolnya benar-benar bisa
   ditekan - dan itu keluhan yang memang muncul. */
[data-design="mnj"] #generator-form .btn-generate:hover:not(:disabled) {
  border-color: rgb(var(--hud-gold-bright-rgb));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, rgb(var(--hud-gold-bright-rgb)) 78%, #0d121c) 0%,
    color-mix(in srgb, rgb(var(--hud-gold-rgb)) 74%, #0a0e16) 52%,
    color-mix(in srgb, rgb(var(--hud-gold-deep-rgb)) 56%, #06090f) 100%
  );
  color: var(--hud-gold-hot);
  box-shadow:
    inset 0 1px 0 rgba(var(--hud-gold-glow-rgb), .45),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 0 0 1px rgba(var(--hud-gold-bright-rgb), .55),
    0 16px 38px rgba(0, 0, 0, .6),
    /* pendar luar dinaikkan .22 → .5: inilah yang paling terbaca sebagai
       "tombol ini merespons", jauh lebih dulu daripada perubahan gradiennya */
    0 0 34px rgba(var(--hud-gold-rgb), .5);
}

/* Sentuhan yang sama untuk tombol lain di halaman, supaya hover terasa satu
   bahasa - bukan hanya tombol utama yang jelas dan sisanya diam. */
[data-design="mnj"] .btn-play:hover:not(:disabled),
[data-design="mnj"] .btn-pattern:hover:not(:disabled) {
  border-color: rgb(var(--hud-gold-bright-rgb));
  box-shadow:
    0 0 0 1px rgba(var(--hud-gold-bright-rgb), .5),
    0 12px 30px rgba(0, 0, 0, .5),
    0 0 26px rgba(var(--hud-gold-rgb), .42);
}

/* ==========================================================================
   RANGKA HUD DI MESIN LOADING POLA
   ==========================================================================
   Bahasa visualnya disamakan dengan konektor di hero: cincin tersegmen yang
   berputar, gerigi skala, kurung siku, dan hierarki ketebalan yang jelas
   (7px / 2px / 1px). Girnya tidak diubah sama sekali - ia tetap jadi tokoh
   utamanya, sekarang berputar di dalam rangka yang bergerak, bukan di ruang
   kosong.

   z-index 1: di atas pintu (0) dan di bawah gir (2).
   ========================================================================== */

[data-design="mnj"] .loading-hud {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-design="mnj"] .loading-hud circle { fill: none; }

/* Cincin terluar: tebal, celah panjang, berputar pelan. */
[data-design="mnj"] .loading-hud__orbit {
  stroke: rgba(var(--hud-gold-rgb), .75);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 48 42 12 42 26 42 12 42;
  transform-origin: 100px 100px;
  animation: loading-hud-putar 16s linear infinite;
  filter: drop-shadow(0 0 5px rgba(var(--hud-gold-rgb), .5));
}

/* Lapis dalam berlawanan arah - dua cincin searah terbaca sebagai satu benda
   tebal, berlawanan arah barulah terbaca sebagai dua lapisan. */
[data-design="mnj"] .loading-hud__tipis {
  stroke: rgba(var(--hud-tepi-rgb), .7);
  stroke-width: 2;
  stroke-dasharray: 5 19;
  transform-origin: 100px 100px;
  animation: loading-hud-putar 22s linear infinite reverse;
}

[data-design="mnj"] .loading-hud__gerigi {
  stroke: rgba(var(--hud-gold-rgb), .45);
  stroke-width: 6;
  stroke-dasharray: 1.6 8;
  transform-origin: 100px 100px;
  animation: loading-hud-putar 60s linear infinite;
}

[data-design="mnj"] .loading-hud__rambut {
  stroke: rgba(var(--hud-gold-rgb), .28);
  stroke-width: 1;
}

[data-design="mnj"] .loading-hud__siku path {
  fill: none;
  stroke: rgba(var(--hud-gold-rgb), .6);
  stroke-width: 2;
  stroke-linecap: square;
}

@keyframes loading-hud-putar { to { rotate: 360deg; } }

/* Saat pintu sudah terbuka dan polanya muncul, rangkanya ikut mundur -
   tugasnya menemani proses, bukan menemani hasilnya. */
[data-design="mnj"] .loading-machine.is-open .loading-hud {
  opacity: 0;
  transition: opacity .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="mnj"] .loading-hud__orbit,
  [data-design="mnj"] .loading-hud__tipis,
  [data-design="mnj"] .loading-hud__gerigi { animation: none; }
}

/* --------------------------------------------------------------------------
   Bar Persentase Aktif di kartu "Sedang Ramai Dimainkan".
   Memakai kelas .game-percentage yang sama dengan kartu di grid bawah; di sini
   hanya jarak dan lebarnya yang disesuaikan dengan kartu yang lebih sempit.
   -------------------------------------------------------------------------- */

[data-design="mnj"] .popular-percentage {
  margin: 8px 0 2px;
}

/* Nilainya dirapatkan ke kiri, sejajar dengan nama game di atasnya - di kartu
   grid ia rata kanan karena bersebelahan dengan elemen lain, di sini tidak. */
[data-design="mnj"] .popular-percentage .game-percentage__meta {
  justify-content: flex-start;
  margin-bottom: 4px;
}

[data-design="mnj"] .popular-percentage .game-percentage__value {
  font-size: 12px;
}

[data-design="mnj"] .popular-percentage .game-percentage__track {
  height: 8px;
}

/* --------------------------------------------------------------------------
   Baris tombol kartu "Sedang Ramai" dipatok ke dasar.
   MAXWIN hanya ada di sebagian game, jadi tinggi isi tiap kartu berbeda dan
   tombolnya berhenti di ketinggian yang berbeda pula - terukur selisih 31px
   antara kartu yang punya MAXWIN dan yang tidak.

   Dipakai margin-top: auto pada kolom flex, bukan tinggi tetap atau tempat
   kosong pengganti: dengan begini tombolnya rata berapa pun jumlah baris di
   atasnya, termasuk kalau nanti ada elemen lain ditambahkan.
   -------------------------------------------------------------------------- */

[data-design="mnj"] .popular-card {
  display: flex;
  flex-direction: column;
}

[data-design="mnj"] .popular-card .popular-actions {
  margin-top: auto;
}

/* MAXWIN di kartu ini dirapatkan, karena ia kini duduk tepat di bawah bar. */
[data-design="mnj"] .popular-card .game-maxwin {
  margin: 6px 0 0;
}