/* ==========================================================================
   DARK FUTURISTIC GAMING HUD — fondasi design system
   ==========================================================================
   Lapisan ini menambahkan bahasa visual HUD di atas sistem tema yang sudah
   ada. Variabel --theme-* per WLB tetap berlaku; token di sini memberi warna
   dan bentuk yang konsisten untuk panel, tombol, dan kartu.

   Pembagian peran warna dipatuhi ketat:
     GOLD  = rangka / antarmuka fisik
     BLUE  = energi digital / koneksi sistem
     GREEN = status online / sukses
     WHITE = informasi yang harus terbaca

   Proporsi target: hitam-navy 70-80%, emas 15-20%, biru 3-7%, hijau khusus
   status saja.
   ========================================================================== */

:root {
  /* -- permukaan ------------------------------------------------------- */
  --hud-bg: #05070d;
  --hud-panel: #080d17;
  --hud-panel-raised: #0b1220;
  --hud-card: #0b101a;
  --hud-card-alt: #0e1624;
  --hud-card-active: #101722;

  /* -- emas metalik ---------------------------------------------------- */
  /* Triplet RGB, bukan warna jadi. Ini yang membuat seluruh varian alpha -
     rgba(...,.12), (...,.35), (...,.72) dan puluhan lainnya - ikut berubah
     saat tema diganti. Kalau yang tersedia hanya nilai heksadesimal, tiap
     varian alpha harus ditulis ulang satu per satu per tema. */
  --hud-gold-rgb: 212, 175, 55;
  --hud-gold-bright-rgb: 243, 214, 117;
  --hud-gold-deep-rgb: 169, 120, 22;
  --hud-gold-dark-rgb: 138, 100, 24;
  /* Putih hangat untuk sorotan dalam dan kilau tepi. Bukan putih murni:
     ia harus membawa rona warna dominannya, kalau tidak sorotannya
     terlihat asing di atas bidang berwarna. */
  --hud-gold-glow-rgb: 255, 240, 200;
  --hud-gold-hot: #fff6d8;
  /* Warna TULISAN di atas bidang dominan yang terisi penuh.
     Emas itu warna terang, jadi tulisan di atasnya harus gelap. Merah dan
     ungu sebaliknya - gelap di atas gelap tidak terbaca sama sekali. Karena
     itu tintanya ikut tema, bukan dipaku satu nilai untuk semua. */
  --hud-gold-ink: #100c02;

  /* Dua peran warna tambahan, lahir dari satu kenyataan: seluruh halaman
     berlatar gelap, dan warna dominan yang sudah digelapkan jadi kurang
     tegas sebagai garis maupun sebagai tanda sorot.

       --hud-tepi-rgb   garis tepi tombol. Boleh berbeda dari warna dominan;
                        di tema gelap sebuah garis terang justru yang membuat
                        tombolnya terbaca sebagai tombol.
       --hud-sorot-rgb  warna saat disorot. Sengaja warna KETIGA, bukan versi
                        lebih terang dari dominan - perubahan rona jauh lebih
                        cepat tertangkap mata daripada perubahan kecerahan. */
  --hud-tepi-rgb: 212, 175, 55;
  --hud-sorot-rgb: 243, 214, 117;
  --hud-blue-rgb: 22, 139, 255;
  --hud-cyan-rgb: 40, 215, 255;

  --hud-gold-dark: #8a6418;
  --hud-gold: #d4af37;
  --hud-gold-bright: #f3d675;
  --hud-gold-deep: #a97816;
  --hud-gold-muted: #8d7330;
  --hud-gold-text: #e4c45c;
  --hud-gold-label: #f7e6a7;
  --hud-gold-edge: rgba(var(--hud-gold-rgb), .35);
  --hud-gold-edge-strong: rgba(var(--hud-gold-rgb), .72);
  --hud-gold-wash: rgba(var(--hud-gold-rgb), .12);

  /* Tepi emas dibuat gradien, bukan kuning rata, supaya terasa logam. */
  --hud-gold-metal: linear-gradient(135deg,
      var(--hud-gold-dark) 0%,
      var(--hud-gold) 28%,
      var(--hud-gold-bright) 48%,
      var(--hud-gold) 68%,
      var(--hud-gold-deep) 100%);

  /* -- biru sistem ----------------------------------------------------- */
  --hud-blue: #00b8ff;
  --hud-blue-bright: #28d7ff;
  --hud-blue-deep: #0077ff;
  --hud-blue-white: #eafbff;
  --hud-blue-glow: rgba(0, 184, 255, .25);
  --hud-blue-sweep: rgba(var(--hud-cyan-rgb), .30);

  /* -- status ---------------------------------------------------------- */
  --hud-green: #39e58c;
  --hud-green-wash: rgba(57, 229, 140, .12);
  --hud-danger: #ff6b6b;

  /* -- teks ------------------------------------------------------------ */
  --hud-text: #f5f7fa;
  --hud-text-secondary: #aab4c3;
  --hud-text-muted: #737f90;

  /* -- bentuk ---------------------------------------------------------- */
  --hud-chamfer: 10px;
  --hud-chamfer-sm: 6px;
  --hud-edge: 1px;
  --hud-edge-strong: 1.5px;

  /* -- bayangan terkendali --------------------------------------------- */
  --hud-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --hud-shadow-gold: 0 0 12px rgba(var(--hud-gold-rgb), .15);
  --hud-shadow-blue: 0 0 14px rgba(0, 184, 255, .18);

  /* -- timing ---------------------------------------------------------- */
  --hud-micro: 180ms;
  --hud-hover: 300ms;
  --hud-dropdown: 380ms;
  --hud-carousel: 500ms;
  --hud-ease: cubic-bezier(.2, .75, .25, 1);
}

/* ==========================================================================
   BENTUK CHAMFER
   ==========================================================================
   Sudut terpotong dibuat dengan clip-path. Karena clip-path memotong border
   biasa, tepi emas dibuat berlapis: elemen luar berisi gradien emas, elemen
   dalam (pseudo-element) menutupinya dengan warna panel dan chamfer yang
   sedikit lebih kecil. Sisa gradien yang terlihat menjadi garis tepi.
   ========================================================================== */

.hud-chamfer {
  --chamfer: var(--hud-chamfer);
  clip-path: polygon(
    var(--chamfer) 0,
    100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%,
    0 var(--chamfer)
  );
}

/* Chamfer empat sudut, untuk panel besar. */
.hud-chamfer--all {
  --chamfer: var(--hud-chamfer);
  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)
  );
}

/* Panel HUD: tepi emas tipis + isi gelap. */
.hud-panel {
  --chamfer: var(--hud-chamfer);
  --hud-panel-edge: var(--hud-gold-edge);
  position: relative;
  isolation: isolate;
  padding: var(--hud-edge);
  background: var(--hud-panel-edge);
  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)
  );
}

.hud-panel > * {
  position: relative;
  z-index: 1;
}

.hud-panel::before {
  position: absolute;
  z-index: 0;
  inset: var(--hud-edge);
  background: linear-gradient(145deg, var(--hud-card-alt), var(--hud-card));
  content: "";
  clip-path: inherit;
}

/* Aksen sudut: garis pendek di dua sudut, penanda khas HUD. */
.hud-corner-accent::after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-top: var(--hud-edge-strong) solid var(--hud-gold-edge-strong);
  border-right: var(--hud-edge-strong) solid var(--hud-gold-edge-strong);
  content: "";
  opacity: .55;
  pointer-events: none;
}

/* ==========================================================================
   SISTEM TOMBOL
   ==========================================================================
   Tiga tingkat: primary (emas), secondary (gelap bertepi emas), selector
   (panel HUD). Semuanya chamfered, tinggi minimum 44px untuk sentuhan.
   ========================================================================== */

.hud-btn {
  --chamfer: var(--hud-chamfer-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  overflow: hidden;
  border: 0;
  outline: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--hud-micro) var(--hud-ease),
    filter var(--hud-hover) ease,
    background 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)
  );
}

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

.hud-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(.35);
  opacity: .6;
}

/* -- primary: emas metalik, teks gelap ---------------------------------- */
.hud-btn--primary {
  background: var(--hud-gold-metal);
  color: var(--hud-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(0, 0, 0, .3);
}

/* Kilau emas hanya saat hover, tidak berjalan terus-menerus. */
.hud-btn--primary::after {
  position: absolute;
  z-index: -1;
  inset: -40% auto -40% -30%;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  content: "";
  opacity: 0;
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}

/* -- secondary: panel gelap, tepi emas ---------------------------------- */
.hud-btn--secondary {
  background:
    linear-gradient(145deg, var(--hud-card-alt), var(--hud-card)) padding-box,
    var(--hud-gold-metal) border-box;
  border: var(--hud-edge) solid transparent;
  color: var(--hud-gold-text);
}

/* -- selector: panel HUD untuk kontrol ---------------------------------- */
.hud-btn--selector {
  min-height: 44px;
  background: linear-gradient(145deg, var(--hud-card-alt), var(--hud-card));
  border: var(--hud-edge) solid var(--hud-gold-edge);
  color: var(--hud-text-secondary);
  font-weight: 700;
}

.hud-btn--selector[aria-pressed="true"],
.hud-btn--selector.is-active {
  border-color: var(--hud-gold);
  color: var(--hud-gold-label);
  box-shadow: inset 0 0 0 1px var(--hud-gold-wash), var(--hud-shadow-gold);
}

/* ==========================================================================
   INTERAKSI — hanya untuk penunjuk presisi
   ==========================================================================
   Perangkat sentuh tidak menjalankan hover sama sekali; hanya umpan balik
   tekan. Ini mencegah efek hover "nyangkut" setelah tap di ponsel.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .hud-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05);
  }

  .hud-btn--primary:hover:not(:disabled)::after {
    animation: hud-gold-sweep 620ms var(--hud-ease) 1;
  }

  .hud-btn--secondary:hover:not(:disabled) {
    background:
      linear-gradient(145deg, #141d2c, #0d1420) padding-box,
      var(--hud-gold-metal) border-box;
    color: var(--hud-gold-label);
  }

  .hud-btn--selector:hover:not(:disabled) {
    border-color: var(--hud-gold-edge-strong);
    color: var(--hud-gold-text);
  }
}

.hud-btn:active:not(:disabled) {
  transform: scale(.975);
  transition-duration: 90ms;
}

@keyframes hud-gold-sweep {
  0% { opacity: 0; transform: translateX(-160%) skewX(-18deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(320%) skewX(-18deg); }
}

/* ==========================================================================
   ENERGY SWEEP — garis biru mengikuti tepi, sekali jalan
   ==========================================================================
   Dipakai saat kartu menjadi aktif atau koneksi berhasil. Kelas
   .is-sweeping dipasang JS lalu dilepas setelah animasi selesai, sehingga
   tidak pernah berulang terus-menerus.
   ========================================================================== */

.hud-sweep {
  position: relative;
}

.hud-sweep::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: var(--hud-edge-strong);
  background: conic-gradient(from var(--stroke-angle, 0deg),
      transparent 0deg,
      transparent 200deg,
      var(--hud-blue-sweep) 232deg,
      var(--hud-blue-bright) 256deg,
      var(--hud-blue-white) 268deg,
      var(--hud-blue-bright) 280deg,
      transparent 312deg,
      transparent 360deg);
  content: "";
  opacity: 0;
  pointer-events: none;
  clip-path: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hud-sweep.is-sweeping::after {
  animation: hud-energy-sweep 700ms linear 1;
}

@keyframes hud-energy-sweep {
  0% { opacity: 0; --stroke-angle: 0deg; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; --stroke-angle: 360deg; }
}

/* ==========================================================================
   STATUS
   ========================================================================== */

.hud-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--hud-green);
  box-shadow: 0 0 8px rgba(57, 229, 140, .5);
}

.hud-status-dot--pulse {
  animation: hud-status-pulse 2.6s ease-in-out infinite;
}

@keyframes hud-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ==========================================================================
   REDUCED MOTION
   ==========================================================================
   Semua gerak dekoratif dimatikan; keterbacaan dan status tetap utuh.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hud-btn,
  .hud-btn::after,
  .hud-sweep::after,
  .hud-status-dot--pulse {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .hud-btn:hover:not(:disabled) {
    transform: none;
  }
}

/* ==========================================================================
   LAPISAN ADAPTASI — kelas lama mengadopsi tampilan HUD
   ==========================================================================
   Tombol dibuat oleh JavaScript dengan nama kelas tetap (btn-generate,
   play-game, member-button, dst). Alih-alih mengubah JS dan berisiko
   memutus fungsi, kelas-kelas itu dipetakan ke bahasa visual HUD di sini.
   Berkas ini dimuat terakhir sehingga menang atas components.css.
   ========================================================================== */

/* -- bentuk chamfer untuk semua tombol utama ----------------------------- */
.btn,
.game-load-more__button,
.provider-carousel__nav,
.view-button {
  --chamfer: var(--hud-chamfer-sm);
  border-radius: 0;
  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)
  );
}

/* -- PRIMARY: HUBUNGKAN, DAFTAR, TAMPILKAN LEBIH BANYAK ------------------ */
.btn-generate,
.generate-game,
.btn-primary,
.member-button--primary,
.game-load-more__button {
  background: var(--hud-gold-metal);
  color: var(--hud-gold-ink);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(0, 0, 0, .3);
  text-shadow: none;
}

/* -- SECONDARY: MAIN SEKARANG, MASUK ------------------------------------- */
.play-game,
.member-button--secondary,
.member-button--outline,
.result-recommended-game__play,
.btn-ghost {
  background: linear-gradient(145deg, var(--hud-card-alt), var(--hud-card));
  border: var(--hud-edge) solid var(--hud-gold-edge-strong);
  color: var(--hud-gold-text);
  box-shadow: none;
}

/* -- SELECTOR: navigasi carousel, pengalih tampilan ---------------------- */
.provider-carousel__nav {
  border: var(--hud-edge) solid var(--hud-gold-edge);
  background: var(--hud-card);
  color: var(--hud-gold-text);
  box-shadow: none;
}

.view-button.active {
  background: var(--hud-gold-wash);
  color: var(--hud-gold-label);
}

/* -- Kilau emas hanya saat hover, bukan animasi berjalan terus ----------- */
.btn-generate::before,
.generate-game::before {
  animation: none;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .btn-generate:hover:not(:disabled)::before,
  .generate-game:hover:not(:disabled)::before {
    animation: hud-gold-sweep 620ms var(--hud-ease) 1;
    opacity: 1;
  }

  .play-game:hover,
  .member-button--secondary:hover,
  .member-button--outline:hover,
  .result-recommended-game__play:hover {
    background: linear-gradient(145deg, #141d2c, #0d1420);
    border-color: var(--hud-gold);
    color: var(--hud-gold-label);
    box-shadow: var(--hud-shadow-gold);
  }

  .provider-carousel__nav:hover:not(:disabled) {
    border-color: var(--hud-gold);
    background: #151a22;
    box-shadow: var(--hud-shadow-gold);
  }
}

/* Perangkat sentuh: hanya umpan balik tekan, tanpa sisa efek hover. */
@media (hover: none) {
  .btn:hover:not(:disabled),
  .provider-carousel__nav:hover:not(:disabled) {
    transform: none;
  }
}

.btn:active:not(:disabled),
.game-load-more__button:active:not(:disabled) {
  transform: scale(.975);
}

/* -- Badge TERSEDIA: hijau redup, denyut halus --------------------------- */
.status-pill--text {
  border-color: rgba(57, 229, 140, .32);
  background: rgba(6, 26, 20, .82);
  color: var(--hud-green);
}

/* -- MAXWIN mengikuti bahasa HUD ----------------------------------------- */
.game-maxwin {
  --chamfer: var(--hud-chamfer-sm);
  border: var(--hud-edge) solid var(--hud-gold-edge);
  border-radius: 0;
  background: var(--hud-gold-wash);
  color: var(--hud-gold-text);
  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)
  );
}

/* ==========================================================================
   PHASE 8 — GRID GAME RESPONSIF + KARTU HUD
   ==========================================================================
   Grid lama memakai lebar kartu tetap 200px (repeat(auto-fill, 200px)),
   sehingga jumlah kolom mengikuti sisa ruang dan menyisakan celah besar.
   Di sini kolom ditentukan eksplisit per breakpoint sesuai brief, dan kartu
   mengisi penuh kolomnya.
   ========================================================================== */

.game-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  justify-content: stretch;
}

.game-card {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* Gambar mengisi lebar kolom, rasio tetap persegi supaya tinggi kartu rata. */
.game-thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (max-width: 1439px) { .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Tampilan list tetap satu kolom di semua ukuran. */

/* -- kartu: rangka HUD chamfered ---------------------------------------- */
.game-card {
  --chamfer: var(--hud-chamfer);
  border: 0;
  border-radius: 0;
  padding: var(--hud-edge);
  background: var(--hud-gold-edge);
  box-shadow: var(--hud-shadow);
  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)
  );
  transition:
    transform var(--hud-hover) var(--hud-ease),
    background var(--hud-hover) ease,
    box-shadow var(--hud-hover) ease;
}

/* Isi kartu menutupi latar tepi, menyisakan garis emas selebar --hud-edge. */
.game-card::before {
  position: absolute;
  z-index: 0;
  inset: var(--hud-edge);
  background: linear-gradient(150deg, var(--hud-card-alt), var(--hud-card));
  content: "";
  clip-path: inherit;
}

.game-card > * { position: relative; z-index: 1; }

/* Garis emas bawah bawaan tidak diperlukan lagi pada rangka chamfer. */
.game-card::after { content: none; }

/* -- persentase: hijau, sesuai peran warna ------------------------------- */
.game-percentage--good,
.game-percentage {
  --percentage-color: var(--hud-green);
  --percentage-color-soft: #7ef0b4;
  --percentage-fill: linear-gradient(90deg, #0d6b45 0%, #1fae74 38%, var(--hud-green) 62%, #17a06a 100%);
  --percentage-glow: rgba(57, 229, 140, .30);
}

.game-percentage--medium {
  --percentage-color: #f5c542;
  --percentage-color-soft: #ffd970;
  --percentage-fill: linear-gradient(90deg, #7a5a10 0%, #d9a92c 38%, #ffd970 62%, #c9971f 100%);
  --percentage-glow: rgba(245, 197, 66, .28);
}

.game-percentage--low {
  --percentage-color: #ff6b6b;
  --percentage-color-soft: #ff9a9a;
  --percentage-fill: linear-gradient(90deg, #6d1d1d 0%, #c93b3b 38%, #ff6b6b 62%, #b93333 100%);
  --percentage-glow: rgba(255, 107, 107, .26);
}

/* Rel gelap, tanpa lengkung, mengikuti bahasa HUD. */
.game-percentage__track {
  height: 8px;
  border: var(--hud-edge) solid rgba(255, 255, 255, .06);
  border-radius: 2px;
  background: linear-gradient(180deg, #03070f, #070d16);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}

.game-percentage__fill { border-radius: 2px; }

/* Simpul kecil bercahaya di ujung isian. */
.game-percentage__fill::after {
  right: -1px;
  width: 5px;
  border-radius: 1px;
  background: var(--percentage-color-soft);
  box-shadow: 0 0 8px var(--percentage-glow);
  opacity: 1;
}

/* Sapuan cahaya berulang dimatikan; isian cukup mengisi sekali saat tampil. */
.game-percentage__fill { animation: none; }
.game-percentage__fill::before { content: none; }

/* -- hover hanya untuk penunjuk presisi ---------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .game-card:hover {
    transform: translateY(-4px);
    background: var(--hud-gold-edge-strong);
    box-shadow: var(--hud-shadow), var(--hud-shadow-gold);
  }

  .game-card:hover .game-thumbnail__image { transform: scale(1.02); }
}

.game-thumbnail__image { transition: transform var(--hud-hover) var(--hud-ease); }

/* -- SKELETON: rangka kartu + sapuan pemindai ---------------------------- */
.game-card-skeleton {
  --chamfer: var(--hud-chamfer);
  position: relative;
  overflow: hidden;
  padding: var(--hud-edge);
  background: rgba(var(--hud-gold-rgb), .16);
  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-card-skeleton::before {
  display: block;
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--hud-card-alt), var(--hud-card));
  content: "";
}

.game-card-skeleton__body {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(150deg, var(--hud-card-alt), var(--hud-card));
}

.game-card-skeleton__line {
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
}

.game-card-skeleton__line--short { width: 55%; }
.game-card-skeleton__line--bar { height: 8px; }
.game-card-skeleton__line--btn { height: 34px; }

/* Satu garis pemindai melintas, tidak berkedip di tempat. */
.game-card-skeleton::after {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(var(--hud-gold-rgb), .10), rgba(var(--hud-cyan-rgb), .08), transparent);
  content: "";
  pointer-events: none;
  animation: hud-scanner 1.5s linear infinite;
}

@keyframes hud-scanner {
  to { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .game-card-skeleton::after { animation: none; opacity: .35; }
  .game-card:hover { transform: none; }
  .game-thumbnail__image { transition: none; }
}

/* ==========================================================================
   LABEL GAMBAR PADA KARTU
   ==========================================================================
   Ikon label dirancang tepat 72x30 px (batas MEMBER_AVAILABLE_LABEL_IMAGE_*).
   CSS lama mengecilkannya ke 38x16 sehingga detailnya hilang; di sini
   ditampilkan pada ukuran aslinya dan diperkecil proporsional di layar
   sempit supaya tidak mendominasi kartu.
   ========================================================================== */

/* Sudut kanan atas kartu terpotong chamfer 10px: pada jarak y dari atas, tepi
   kanan kartu berada di (100% - (10 - y)). Badge ditaruh 2px dari atas dan
   10px dari kanan supaya tetap di dalam bentuk dan tidak terpotong. */
.status-pill--image {
  top: 2px;
  right: 10px;
  left: auto;
  width: 46px;
  height: 20px;
  max-width: 46px;
  max-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.status-pill--image .status-pill__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

@media (max-width: 767px) {
  .status-pill--image {
    top: 2px;
    right: 9px;
    width: 38px;
    height: 16px;
  }
}

/* ==========================================================================
   PHASE 7a — SYSTEM STATUS BAR
   ==========================================================================
   Bar mendatar bergaya HUD. Warna mengikuti peran: hijau untuk online, emas
   untuk jadwal, biru untuk sistem AI, abu untuk keterangan tambahan.
   Hanya titik status yang berdenyut; barnya sendiri diam.
   ========================================================================== */

.score-notification {
  --chamfer: var(--hud-chamfer-sm);
  height: auto;
  min-height: 44px;
  margin-bottom: 20px;
  border: var(--hud-edge) solid var(--hud-gold-edge);
  border-radius: 0;
  background: linear-gradient(145deg, var(--hud-panel-raised), var(--hud-panel));
  background-size: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  animation: 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)
  );
}

.score-notification__icon {
  flex-basis: 44px;
  border-right: var(--hud-edge) solid var(--hud-gold-edge);
  background: var(--hud-gold-wash);
  color: var(--hud-gold-text);
  animation: none;
}

.score-notification__content { gap: 0; }

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border-right: var(--hud-edge) solid rgba(255, 255, 255, .05);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .015em;
  white-space: nowrap;
}

.status-item__label { color: var(--hud-text-secondary); }
.status-item[data-status-tone="online"] .status-item__label { color: var(--hud-green); font-weight: 800; }
.status-item[data-status-tone="gold"] .status-item__label { color: var(--hud-gold-text); font-weight: 800; }
.status-item[data-status-tone="ai"] .status-item__label { color: var(--hud-blue-bright); }
.status-item[data-status-tone="muted"] .status-item__label { color: var(--hud-text-muted); }

/* -- Mobile: hanya informasi prioritas, tanpa marquee ---------------------- */
@media (max-width: 767px) {
  .score-notification {
    height: auto;
    min-height: 40px;
    margin-bottom: 14px;
  }

  .score-notification__icon { flex-basis: 38px; }

  /* Marquee dimatikan; isi dibuat statis dan dipusatkan supaya tidak ada
     gerak terus-menerus dan tidak ada overflow mendatar. */
  .score-notification__viewport { flex: 1 1 0; min-width: 0; }

  .score-notification__content {
    display: flex;
    width: 100%;
    gap: 0;
    animation: none !important;
    transform: none !important;
  }

  /* Duplikat hanya dibutuhkan marquee; tanpa marquee ia justru menggandakan
     teks, jadi disembunyikan dan sisanya melebar penuh. */
  .score-notification__duplicate { display: none !important; }

  .score-notification__message {
    display: flex;
    width: 100%;
    min-height: 38px;
    justify-content: space-evenly;
    gap: 0;
  }

  /* Sel mana yang disembunyikan di layar sempit diatur di mnj-design.css,
     berbarengan dengan susunan bar statusnya. */
  .status-item { padding: 0 8px; border-right: 0; font-size: 10px; }
}

/* ==========================================================================
   PHASE 7b — PANEL KONTROL PENCARIAN & FILTER
   ==========================================================================
   Desktop: satu baris, pencarian paling lebar. Mobile: pencarian selebar
   layar, lalu dua tombol pemicu bottom sheet.
   ========================================================================== */

.filter-bar {
  --chamfer: var(--hud-chamfer);
  gap: 12px;
  padding: 12px 14px;
  border: var(--hud-edge) solid var(--hud-gold-edge);
  border-radius: 0;
  background: linear-gradient(145deg, var(--hud-panel-raised), var(--hud-panel));
  box-shadow: var(--hud-shadow);
  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)
  );
}

/* Pencarian mendapat porsi terbesar; kontrol lain seukuran isinya. */
.filter-bar .search-box {
  --chamfer: var(--hud-chamfer-sm);
  /* Hanya benar selama .filter-bar tersusun mendatar. Pada susunan kolom di
     layar sempit, flex-basis mengatur TINGGI - lihat penangkalnya di
     mnj-design.css. */
  flex: 1 1 420px;
  border-color: var(--hud-gold-edge);
  border-radius: 0;
  background: var(--hud-card);
  color: var(--hud-gold-text);
  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)
  );
  transition: border-color var(--hud-hover) ease, box-shadow var(--hud-hover) ease;
}

.filter-bar .search-box:focus-within {
  border-color: var(--hud-blue);
  box-shadow: var(--hud-shadow-blue);
}

.filter-bar .search-box input { color: var(--hud-text); }
.filter-bar .search-box input::placeholder { color: var(--hud-text-muted); }

.filter-controls { flex: 0 0 auto; gap: 8px; }
.filter-group { display: flex; align-items: center; gap: 8px; }

.filter-controls select {
  --chamfer: var(--hud-chamfer-sm);
  min-height: 44px;
  border: var(--hud-edge) solid var(--hud-gold-edge);
  border-radius: 0;
  background-color: var(--hud-card);
  color: var(--hud-text-secondary);
  font-size: 12px;
  font-weight: 650;
  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)
  );
}

.view-switch { border-color: var(--hud-gold-edge); border-radius: 0; background: var(--hud-card); }

/* -- pemicu bottom sheet ------------------------------------------------- */
.filter-triggers { display: none; gap: 10px; }
.filter-triggers[hidden] { display: none; }

.filter-trigger {
  --chamfer: var(--hud-chamfer-sm);
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: var(--hud-edge) solid var(--hud-gold-edge);
  background: var(--hud-card);
  color: var(--hud-gold-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  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)
  );
}

.filter-trigger[aria-expanded="true"] {
  border-color: var(--hud-gold-edge-strong);
  background: var(--hud-gold-wash);
}

.filter-trigger__count {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--hud-gold);
  color: var(--hud-gold-ink);
  font-size: 10px;
  font-weight: 900;
}

.filter-trigger__count[hidden] { display: none; }

/* ==========================================================================
   BOTTOM SHEET
   ========================================================================== */

.filter-sheet { position: fixed; z-index: 60; inset: 0; }
.filter-sheet[hidden] { display: none; }

.filter-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 10, .68);
  opacity: 0;
  transition: opacity var(--hud-dropdown) var(--hud-ease);
}

.filter-sheet.is-open .filter-sheet__backdrop { opacity: 1; }

.filter-sheet__panel {
  --chamfer: var(--hud-chamfer);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 80vh;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  border-top: var(--hud-edge-strong) solid var(--hud-gold-edge-strong);
  background: linear-gradient(180deg, var(--hud-panel-raised), var(--hud-bg));
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .55);
  transform: translateY(100%);
  transition: transform var(--hud-dropdown) var(--hud-ease);
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%, 0 var(--chamfer));
}

.filter-sheet.is-open .filter-sheet__panel { transform: translateY(0); }

.filter-sheet__handle {
  width: 44px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--hud-gold-edge);
}

.filter-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: var(--hud-edge) solid var(--hud-gold-edge);
}

.filter-sheet__title {
  margin: 0;
  color: var(--hud-gold-label);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.filter-sheet__close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: var(--hud-edge) solid var(--hud-gold-edge);
  background: transparent;
  color: var(--hud-text-secondary);
  cursor: pointer;
}

.filter-sheet__body { padding: 16px 0; }

/* Di dalam sheet kontrol ditumpuk vertikal dan dibuat setinggi sentuhan. */
.filter-sheet__body .filter-group {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.filter-sheet__body select {
  width: 100%;
  min-height: 48px;
}

.filter-sheet__foot {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  padding-top: 14px;
  border-top: var(--hud-edge) solid var(--hud-gold-edge);
}

.filter-sheet__reset,
.filter-sheet__apply {
  --chamfer: var(--hud-chamfer-sm);
  min-height: 46px;
  border: var(--hud-edge) solid var(--hud-gold-edge);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
  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)
  );
}

.filter-sheet__reset { background: transparent; color: var(--hud-text-secondary); }
.filter-sheet__apply { border-color: transparent; background: var(--hud-gold-metal); color: var(--hud-gold-ink); }

body.filter-sheet-open { overflow: hidden; }

/* ==========================================================================
   TATA LETAK MOBILE
   ========================================================================== */

@media (max-width: 767px) {
  .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .filter-bar .search-box { flex: 0 0 44px; width: 100%; }

  .filter-triggers { display: flex; }

  /* Kontrol asli disembunyikan dari bar - isinya dipindahkan ke sheet saat
     dibuka. Tetap di DOM supaya nilai dan listener-nya utuh. */
  .filter-controls { display: flex; gap: 8px; }
  .filter-bar .filter-controls > .filter-group { display: none; }
  .filter-controls .view-switch { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-sheet__panel,
  .filter-sheet__backdrop { transition: none; }
}

/* ==========================================================================
   PHASE 7c — TABLET + STICKY FILTER BAR
   ========================================================================== */

/* responsive.css menata .filter-controls sebagai grid dengan anggapan select
   adalah anak langsung. Sekarang select dibungkus .filter-group, jadi rentang
   tablet ditata ulang sebagai flex yang membungkus. */
@media (min-width: 768px) and (max-width: 1050px) {
  .filter-controls { display: flex; flex-wrap: wrap; }
  .filter-group { flex: 1 1 260px; }
  .filter-group select { flex: 1 1 0; width: 100%; min-width: 0; }
}

/* -- menempel di bawah header setelah dilewati --------------------------- */
.filter-bar {
  position: sticky;
  z-index: 30;
  top: var(--filter-sticky-top, 72px);
  transition: padding var(--hud-hover) var(--hud-ease), box-shadow var(--hud-hover) ease;
}

.filter-bar-sentinel { height: 0; }

.filter-bar.is-stuck {
  padding: 8px 12px;
  border-color: var(--hud-gold-edge-strong);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
}

.filter-bar.is-stuck .search-box { height: 38px; }
.filter-bar.is-stuck .filter-controls select,
.filter-bar.is-stuck .filter-trigger { min-height: 38px; }
.filter-bar.is-stuck .view-switch { padding: 2px; }

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

/* ==========================================================================
   PHASE 4 — STATE KONEKSI
   ==========================================================================
   Label tombol punya min-width yang dikunci dari JS seukuran state
   terpanjang, sehingga lebar dan posisi tombol tidak melompat saat
   statenya berganti (syarat brief bagian 36).
   ========================================================================== */

.btn-generate [data-generate-label] {
  display: inline-block;
  text-align: center;
}

.btn-generate[data-connection-state] { transition: background var(--hud-hover) ease, color var(--hud-hover) ease; }

/* -- menghubungkan: biru sistem, energi digital -------------------------- */
.btn-generate[data-connection-state="connecting"] {
  background: linear-gradient(135deg, var(--hud-blue-deep), var(--hud-blue));
  color: var(--hud-blue-white);
}

/* Garis energi berjalan selama menunggu jawaban server. Berhenti sendiri
   begitu state berubah karena aturannya ikut hilang.
   Memakai ::after karena ::before sudah dipakai kilau tombol. */
.btn-generate[data-connection-state="connecting"]::after {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hud-blue-white), transparent);
  content: "";
  animation: connection-scan 1.1s linear infinite;
}

@keyframes connection-scan {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* -- terhubung: hijau, khusus status sukses ------------------------------ */
.btn-generate[data-connection-state="connected"] {
  background: linear-gradient(135deg, #1f9c62, var(--hud-green));
  color: #04120b;
}

/* -- gagal: merah teredam, tetap terbaca --------------------------------- */
.btn-generate[data-connection-state="error"] {
  background: linear-gradient(135deg, #8f2b2b, var(--hud-danger));
  color: #fff5f5;
}

/* ==========================================================================
   NOTIFIKASI KONEKSI
   ========================================================================== */

.connection-notice {
  --chamfer: var(--hud-chamfer-sm);
  position: fixed;
  z-index: 90;
  top: calc(var(--filter-sticky-top, 72px) + 14px);
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border: var(--hud-edge) solid rgba(57, 229, 140, .45);
  background: linear-gradient(145deg, #0c1a15, var(--hud-panel));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 300ms var(--hud-ease), transform 300ms var(--hud-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)
  );
}

.connection-notice[hidden] { display: none; }
.connection-notice.is-visible { opacity: 1; transform: translateY(0); }

.connection-notice__check {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: var(--hud-edge) solid rgba(57, 229, 140, .5);
  border-radius: 50%;
  background: var(--hud-green-wash);
  color: var(--hud-green);
}

/* Centang digambar sekali saat muncul, bukan berputar terus. */
.connection-notice.is-visible .connection-notice__check svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: connection-check 420ms var(--hud-ease) 120ms forwards;
}

@keyframes connection-check {
  to { stroke-dashoffset: 0; }
}

.connection-notice__text { display: grid; gap: 3px; min-width: 0; }

.connection-notice__title {
  color: var(--hud-green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
}

.connection-notice__detail {
  overflow: hidden;
  color: var(--hud-text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-notice__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) {
  .connection-notice { right: 12px; left: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-notice { transition: none; }
  .btn-generate[data-connection-state="connecting"]::after,
  .connection-notice.is-visible .connection-notice__check svg path { animation: none; }
  .connection-notice.is-visible .connection-notice__check svg path { stroke-dashoffset: 0; }
}