/* TAMORA_PREMIUM_V3 tamora-neon-luxury : per-template color corrections only; no image or layout edits. */
:root {--tm-bg:#0a080b;--tm-panel:#21150f;--tm-accent:#ffad16;--tm-gold:#ffe36c;--tm-ink:#291601;--tm-muted:#f8c889;--tm-edge:#e18112;}
/* Recolor of site-overrides.css; {"hex": 15, "rgb": 0, "hsl": 0} */
/* =========================================================================
   SITE OVERRIDES
   -------------------------------------------------------------------------
   Stylesheet kecil yang dimuat SETELAH stylesheet utama, di kedua mode:
   - mode default  : setelah build app.css
   - mode template : setelah public/css/costum/<tema>.css

   Dua kegunaan:

   1. PARITY — aturan yang ada di build default tapi tidak ikut ter-generate
      ke file tema. File tema menggantikan app.css sepenuhnya, jadi tanpa
      ini aturan tersebut hilang untuk semua tema selain "default".

   2. HOTFIX — koreksi yang sumbernya sudah diperbaiki di resources/css/,
      tapi belum ikut ter-build ulang (dan tidak akan pernah masuk ke file
      tema yang sudah ter-generate). Aman dibiarkan walau nanti di-rebuild:
      nilainya sama dengan sumbernya.

   3. KOMPONEN BARU — komponen yang belum ada di app.css maupun di file tema
      mana pun, jadi tidak ada versi tema yang bisa "kalah". Warnanya diekspos
      sebagai CSS variable supaya tema bisa menimpanya kalau perlu.

   Untuk bagian 1 dan 2 jangan taruh warna — warna adalah wewenang tema.

   Publish ke public/ lewat: php artisan template:publish
   ========================================================================= */

/* ---------- 1. PARITY ---------- */

/* Tombol nominal cepat di form deposit/withdraw */
.preset-amounts .app-button {
    width: 100%;
    margin-bottom: 1rem;
}

/* Nav kategori di beranda desktop (Beranda / Eksklusif / Sports+ / Casino / ...) */
nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d {
    justify-content: center;
}

/* ---------- 2. HOTFIX ---------- */

/* Beranda desktop: kedua blok Arcade dulu di-pin ke grid-row 6/7 dan 7/8,
   sehingga terlempar ke atas SNS card dan Top Tables walaupun urutan DOM-nya
   sudah di bawah Top Tables. Dikembalikan ke auto-placement supaya urutan
   visual mengikuti urutan DOM. Sumber sudah dibetulkan di
   resources/css/desktop.css. */
.home--d .card.card--arcade-carousel {
    grid-row: auto;
}

.home--d .arcade-showcase {
    grid-row: auto;
}

/* Halaman Lotto: jumlah kolom grid. Build kita hanya punya 2 kolom (base) dan
   4 kolom di >=1024px, tanpa breakpoint 640px sama sekali. Referensi memakai
   2 / 3 / 5. Angka 5 itu yang membentuk tata letaknya: widget dan kartu rumah
   memakai grid-column:span 2, jadi satu baris memuat dua elemen lebar plus
   satu kartu biasa, lalu grid-auto-flow:dense menutup sisanya. Dengan 4 kolom
   dua elemen lebar sudah menghabiskan satu baris penuh.

   Selector .lotto-content .lotto-grid dipakai (bukan .lotto-grid polos) supaya
   spesifisitasnya imbang dengan .lotto-grid[data-v-1f2cc254] di build; karena
   file ini dimuat terakhir, yang imbang akan menang. */
@media (min-width: 640px) {
    .lotto-content .lotto-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lotto-content .lotto-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ---------- 3. KOMPONEN BARU ---------- */

/* Featured games (kolom "Featured" di dalam .games-grid halaman provider slot).
   Blok ini tidak ada di app.css maupun di file tema mana pun. Scoped
   [data-v-455b314a] mengikuti markup di
   resources/views/desktop/partials/slots/slotsgames.blade.php.
   Warna latar bisa ditimpa per tema lewat --featured-bg. */
.slot-content[data-v-455b314a]{--featured-bg:#ff6467;position:relative;min-height:15rem}
.slot-content__featured[data-v-455b314a]{grid-column:1/-1;position:relative;display:grid;padding:.5rem;grid-gap:.5rem;margin-top:-.5rem;width:calc(100% + 1rem);transform:translateX(-.5rem);background-color:var(--featured-bg);grid-template-columns:auto repeat(4,minmax(0,1fr))}
.slot-content__featured>div[data-v-455b314a]{display:flex;flex-direction:column;align-items:center;justify-content:center;grid-gap:.25rem;gap:.25rem}
.slot-content__featured>div span[data-v-455b314a]{font-weight:700;font-size:.625rem;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;transform:rotate(180deg)}
.slot-content__featured.featured--d[data-v-455b314a]{grid-row:span 5;grid-column:unset;margin:0;width:100%;height:100%;transform:unset;align-items:center;border-radius:10px;grid-template-columns:unset;grid-template-rows:auto repeat(4,minmax(0,1fr))}
.slot-content__featured.featured--d>div[data-v-455b314a]{flex-direction:row;align-self:end}
.slot-content__featured.featured--d>div span[data-v-455b314a]{-ms-writing-mode:unset;writing-mode:unset;transform:unset;font-size:.875rem}
.slot-content .games-grid[data-v-455b314a],.slot-content .slot-loading[data-v-455b314a]{display:grid;grid-gap:.75rem;align-items:start;align-content:start;grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1024px){.slot-content .games-grid[data-v-455b314a],.slot-content .slot-loading[data-v-455b314a]{grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}}
.slot-content .no-results[data-v-455b314a]{width:100%;padding:.75rem 2rem;text-align:center;font-size:.875rem;background-color:#21150f}
.slot-loading[data-v-455b314a]{position:absolute;width:100%}
.slot-loading--rtp[data-v-455b314a]{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Tile di dalam blok Featured. Aturan [data-v-31b60a9e] aslinya belum ada di
   stylesheet mana pun, jadi ini versi minimal supaya tile tidak jebol keluar
   kolom (tanpa ini <img> tampil di ukuran natural 600x600 dan menimpa
   games-grid). Ganti dengan CSS asli kalau nanti tersedia. */
.featured-game[data-v-31b60a9e]{min-width:0;min-height:0}
.featured-game[data-v-31b60a9e]>a{display:block;width:100%;height:100%}
.featured-game__container[data-v-31b60a9e]{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:10px}
.featured-game__img[data-v-31b60a9e]{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.featured-game__img[data-v-31b60a9e] img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
/* Nama game disembunyikan — mengikuti konvensi .promo-card__title dan
   .casino-game__name yang juga display:none. Markup tetap dipertahankan
   supaya identik dengan referensi dan tetap terbaca screen reader lewat
   alt gambar. */
.featured-game__name[data-v-31b60a9e]{display:none}
/* Klik kanan langsung ke gambar game asli */
.game-item__placeholder,
.casino-game__placeholder {
    pointer-events: none !important;
}

/* === PERMATA757 HOT SLOTS V5: START ===
   Khusus Hot Slots beranda desktop & mobile.
   Tidak mengubah logo, live chat, banner, atau katalog lain. */

/* Tinggi thumbnail sedikit ditambah: rasio 4:3, bukan pipih. */
.slot-showcase__grid .game-item--slot,
.hot-slots-card .game-item--slot {
    position: relative;
    height: 0;
    padding-bottom: 75% !important;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(0, 0, 0, .16);
}

/* Jaga proporsi gambar, tanpa pemotongan wajah/teks/logo pada cover.
   Mode image-rendering auto juga menghindari efek bergerigi dari CSS global. */
.slot-showcase__grid .game-item--slot > .game-item__img,
.hot-slots-card .game-item--slot > .game-item__img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    image-rendering: auto !important;
    border-radius: inherit;
}

/* Loader dan placeholder tetap ada untuk gambar gagal dimuat,
   tetapi tidak akan menghalangi interaksi dengan gambar game. */
.slot-showcase__grid .game-item__placeholder,
.hot-slots-card .game-item__placeholder {
    pointer-events: none;
    border-radius: 16px;
}

/* Nama panjang ditampilkan maksimal dua baris, tidak terpotong menjadi
   satu baris pendek seperti sebelumnya. */
.slot-showcase__grid .game-item__name,
.hot-slots-card .game-item__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    line-height: 1.35;
    min-height: 2.7em;
    padding: .35rem .2rem 0;
    text-align: center;
}

/* Desktop: tetap enam kartu per baris pada layar lebar, jarak lebih lega. */
.slot-showcase__grid {
    gap: 12px !important;
}
@media (min-width: 769px) and (max-width: 1199px) {
    .slot-showcase__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* Mobile: cover cukup lebar agar detail game terbaca, tetap bisa digeser. */
.hot-slots-card__container {
    grid-auto-columns: 42% !important;
    gap: 10px !important;
}
@media (min-width: 480px) {
    .hot-slots-card__container {
        grid-auto-columns: 36% !important;
    }
}
@media (min-width: 700px) {
    .hot-slots-card__container {
        grid-auto-columns: 30% !important;
    }
}
/* === PERMATA757 HOT SLOTS V5: END === */

/* === PERMATA757 HOT SLOTS LAYOUT V6: START === */
/* Berdasarkan contoh pengguna: desktop 6x2, mobile 3x3 + geser horizontal.
   Scoped ke Hot Slots di beranda, tidak memengaruhi katalog game lain. */

/* Desktop: 6 gambar sejajar dengan jarak rapat, mengikuti contoh #1. */
@media (min-width: 769px) {
  .home--d .slot-showcase__grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 11px 7px !important;
    align-items: start;
  }
  .home--d .slot-showcase__grid > .game-item__wrapper {
    min-width: 0;
  }
  .home--d .slot-showcase__grid > .game-item__wrapper:nth-child(n+13) {
    display: none;
  }
  .home--d .slot-showcase__grid .game-item--slot {
    height: 0 !important;
    padding-bottom: 67.44186% !important;
    border-radius: 3px !important;
    overflow: hidden;
  }
  .home--d .slot-showcase__grid .game-item--slot > .game-item__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    image-rendering: auto !important;
    border-radius: 3px !important;
  }
  .home--d .slot-showcase__grid .game-item__name {
    display: block !important;
    width: 100%;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    padding: 4px 1px 0 !important;
    margin: 0 !important;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
  }
  .home--d .slot-showcase__grid .game-item__placeholder {
    border-radius: 3px !important;
    pointer-events: none;
  }
}

/* Mobile: 3 kolom terlihat dan 3 baris, sisanya geser horizontal.
   Grid tetap mengalir per kolom agar urutan sesuai contoh #2. */
@media (max-width: 768px) {
  .hot-slots-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .hot-slots-card .hot-slots-card__container {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(3, minmax(0, auto)) !important;
    grid-auto-columns: 29% !important;
    column-gap: 5px !important;
    row-gap: 8px !important;
    align-items: start;
  }
  .hot-slots-card .hot-slots-card__container > .game-item__wrapper {
    min-width: 0;
    width: 100%;
  }
  .hot-slots-card .game-item--slot {
    height: 0 !important;
    padding-bottom: 67.44186% !important;
    overflow: hidden;
    border-radius: 3px !important;
  }
  .hot-slots-card .game-item--slot > .game-item__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    image-rendering: auto !important;
    border-radius: 3px !important;
  }
  .hot-slots-card .game-item__name {
    display: block !important;
    width: 100%;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    padding: 3px 0 0 !important;
    margin: 0 !important;
    font-weight: 700;
    font-size: 9px !important;
    text-align: center;
  }
  .hot-slots-card .game-item__placeholder {
    border-radius: 3px !important;
    pointer-events: none;
  }
  /* Ikon provider dan pita game tetap tampil namun tidak menghalangi cover. */
  .hot-slots-card .game-item__provider {
    width: 19px !important;
    height: 19px !important;
  }
  .hot-slots-card .game-item__provider div {
    width: 16px !important;
    height: 16px !important;
  }
}
/* === PERMATA757 HOT SLOTS LAYOUT V6: END === */

/* PERMATA757_POKER_LAYOUT_V1_BEGIN
   Tata letak khusus halaman /poker (desktop & mobile).
   Tidak mengubah halaman atau daftar game lainnya. */

/* Grid kartu tetap seragam dan tidak tergantung tinggi gambar provider. */
section.poker .poker__grid {
  display: grid !important;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  align-content: start;
  gap: 12px !important;
}
section.poker .poker__grid > .poker__game {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1.95 / 1;
  padding: 8px !important;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 6px;
  background: #21150f;
  grid-column: auto !important;
  grid-row: auto !important;
}
section.poker .poker__grid > .poker__game > img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  display: block;
}
section.poker .poker__grid > .poker__game > span {
  display: none !important;
}

/* Desktop: 6 kartu per baris, identik tinggi dan jaraknya. */
@media (min-width: 1024px) {
  section.poker.poker--d .poker__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
  section.poker.poker--d .poker__actions {
    display: grid !important;
    grid-row: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: min(100%, 820px);
    justify-self: center;
    margin: 0 auto;
  }
  section.poker.poker--d .poker__actions > a,
  section.poker.poker--d .poker__actions > button {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  section.poker.poker--d .poker__actions > :first-child {
    background: #ffad16;
    color: #fff;
  }
  section.poker.poker--d .poker__actions > :nth-child(2) {
    background: #e9c500;
    color: #0a080b;
  }
  /* Dua lobby provider pada source bukan dua kolom raksasa penuh layar. */
  section.poker.poker--d .provider-lobbies {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 560px);
    margin: 16px auto !important;
    justify-self: center;
    align-items: stretch;
  }
}

/* Tablet/mobile: grid tidak gepeng dan tombol selalu mudah ditekan. */
@media (max-width: 1023.98px) {
  section.poker .poker-content { min-width: 0; }
  section.poker .poker__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  section.poker .poker__grid > .poker__game {
    padding: 5px !important;
    aspect-ratio: 1.65 / 1;
  }
  section.poker .poker__actions {
    grid-row: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    width: 100%;
  }
  section.poker .poker__actions > * {
    grid-column: auto !important;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  section.poker .provider-lobbies {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 350px) {
  section.poker .poker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* PERMATA757_POKER_LAYOUT_V1_END */

/* PERMATA757_POKER_REFERENCE_GAMBAR1_V2_BEGIN
   Hanya desktop /poker. Menyamakan grid 6 kolom, strip username akun,
   dan dua tombol sesuai screenshot pertama. Tidak menyembunyikan provider lain. */
@media (min-width: 1024px) {
  section.poker.poker--d .poker-account-strip-v2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 40px;
    gap: 7px;
    padding: 5px 9px;
    margin: 11px 0 12px;
    color: #ffffff;
    background: #2d1b0b;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 13px;
  }
  section.poker.poker--d .poker-account-strip-v2__symbol {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    fill: currentColor;
  }
  section.poker.poker--d .poker-account-strip-v2__name {
    overflow-wrap: anywhere;
  }
  section.poker.poker--d .poker-account-strip-v2__copy {
    min-width: 62px;
    height: 26px;
    margin-left: 5px;
    border: 1px solid #ffad16;
    border-radius: 16px;
    background: #ffad16;
    box-shadow: 0 2px 0 #21150f, 0 1px 3px rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  section.poker.poker--d .poker__grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    align-content: start !important;
    gap: 16px !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  section.poker.poker--d .poker__grid > .poker__game {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 5px !important;
    background: #21150f !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }
  section.poker.poker--d .poker__grid > .poker__game > img {
    position: static !important;
    display: block !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  section.poker.poker--d .poker__grid > .poker__game > span {
    display: none !important;
  }
  section.poker.poker--d .poker__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-row: auto !important;
    gap: 16px !important;
    width: min(100%, 752px) !important;
    margin: 11px auto 20px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  section.poker.poker--d .poker__actions > a,
  section.poker.poker--d .poker__actions > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 33px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center;
    text-decoration: none !important;
  }
  section.poker.poker--d .poker__actions > :first-child {
    color: #fff !important;
    background: #ffad16 !important;
    border-radius: 5px 5px 20px 20px !important;
    box-shadow: 0 3px 0 #e18112 !important;
  }
  section.poker.poker--d .poker__actions > :nth-child(2) {
    color: #fff !important;
    background: #dfc000 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }
}
/* Pada layar lebih sempit, pakai layout responsif Poker V1 yang sudah ada.
   Strip akun tetap rapih jika lebar <= 1023 piksel. */
@media (max-width: 1023.98px) {
  section.poker .poker-account-strip-v2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px;
    margin: 8px 0;
    background: #2d1b0b;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
  }
  section.poker .poker-account-strip-v2__symbol { width:14px; height:14px; fill:currentColor; }
  section.poker .poker-account-strip-v2__copy {
    border: 0; border-radius: 15px; background: #ffad16; color: #fff;
    font-weight: 700; padding: 5px 12px; cursor: pointer;
  }
}
/* PERMATA757_POKER_REFERENCE_GAMBAR1_V2_END */


/* PERMATA757_POKER_PROVIDER_DI_GRID_V3_BEGIN
   Kartu provider tambahan (mis. V8 Poker / Playtech Pokers) berada di grid
   Poker yang sama dengan 13 kartu lainnya, di desktop maupun mobile.
   Tidak menyentuh kartu Poker bawaan, tombol unduh, atau halaman lain. */
section.poker .poker__grid > .poker__extra-provider-v3 {
    cursor: pointer !important;
    padding: 5px 7px !important;
    border: 0;
    background: #21150f !important;
}
section.poker .poker__grid > .poker__extra-provider-v3 > .poker__extra-provider-v3__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    text-decoration: none !important;
    position: relative;
    outline-offset: 3px;
}
section.poker .poker__grid > .poker__extra-provider-v3 > .poker__extra-provider-v3__link > img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}
section.poker .poker__grid > .poker__extra-provider-v3 .poker__extra-provider-v3__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
section.poker .poker__grid > .poker__extra-provider-v3:focus-within {
    outline: 2px solid #ffad16;
    outline-offset: 2px;
}

/* PERMATA757 — Samakan lebar artikel footer dengan konten utama */
@media (min-width: 1024px) {
    .footer-text.footer-text--d {
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}
/* PERMATA757 - Sejajarkan artikel dan footer navigasi */
@media (min-width: 1024px) {
    .footer-text.footer-text--d,
    footer.app-footer.app-footer--d {
        width: 100% !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}
/* PERMATA757_POKER_PROVIDER_DI_GRID_V3_END */

/* Recolor of permata757-royal-ui-v2.css; {"hex": 0, "rgb": 51, "hsl": 0} */
/* PERMATA757 - ROYAL SAPPHIRE UNIFIED NAV AND BUTTONS V2
   Only loaded when active_template = royal-sapphire-gold.
   Public pages only; no game URLs, click handlers, positioning or DOM changes.
   Note: no global 'button' or 'a' selector to protect controls and game cards.
*/

:root {
    --rsv2-blue-edge: rgba(255, 173, 22, .64);
    --rsv2-blue-light: rgba(255, 173, 22, .27);
    --rsv2-blue-hover: rgba(255, 173, 22, .42);
    --rsv2-gold-edge: rgba(255, 221, 128, .64);
}

/* One unified frame for each top icon strip; links remain separate click targets,
   but without individual luminous boxes. Keep original image/size/scroll behavior. */
body.is-chaosapiv2 nav.app-menu.app-menu--d,
body.is-chaosapi nav.app-menu {
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px var(--rsv2-blue-edge),
                0 0 12px rgba(255, 173, 22, .19),
                0 5px 15px rgba(10, 8, 11, .32) !important;
    background-color: rgba(33, 21, 15, .29);
}

body.is-chaosapiv2 nav.app-menu.app-menu--d > ul,
body.is-chaosapi nav.app-menu > ul {
    border-radius: 12px;
}

/* Cancel V1 single-link frames inside the shared top frame. */
body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a,
body.is-chaosapi nav.app-menu .app-menu__item > a {
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    transition: background-color .22s ease, color .22s ease,
                box-shadow .22s ease !important;
}

/* Mild active state stays legible and doesn't look like a separate card. */
body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a.app-link--active,
body.is-chaosapi nav.app-menu .app-menu__item > a.app-link--active {
    background-color: rgba(255, 173, 22, .16) !important;
}

/* Desktop's existing header image, provider menu scrolling and icon sizing remain. */
@media (hover: hover) and (pointer: fine) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a:hover,
    body.is-chaosapi nav.app-menu .app-menu__item > a:hover {
        background-color: rgba(255, 173, 22, .20) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .30) !important;
    }
}

/* On phones the original menu is 1rem wider and shifted left; putting the frame
   back inside the container prevents its rounded edges from being clipped. */
@media (max-width: 1023.98px) {
    body.is-chaosapi nav.app-menu {
        left: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Small text navigation links, including the mobile header breadcrumbs,
   are intentionally separate rounded pills as requested. */
body.is-chaosapiv2 nav.app-breadcrumbs .nav-item:not(.nav-item--fill) > a,
body.is-chaosapi nav.app-breadcrumbs .nav-item:not(.nav-item--fill) > a {
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(225, 129, 18, .29), rgba(33, 21, 15, .25)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .32) !important;
    transition: background-color .2s ease, box-shadow .2s ease !important;
}

body.is-chaosapiv2 nav.app-breadcrumbs .nav-item > a.app-link--active,
body.is-chaosapi nav.app-breadcrumbs .nav-item > a.app-link--active {
    box-shadow: inset 0 0 0 1px var(--rsv2-gold-edge),
                0 0 8px rgba(230, 179, 70, .15) !important;
}

@media (max-width: 1023.98px) {
    body.is-chaosapi .app-header__extra .app-breadcrumbs ul { gap: 3px; }
}

/* Consistent buttons on all public pages: homepage, registration, game categories,
   support, profile, payments. Excludes circular/icon and Play-overlay buttons. */
body.is-chaosapiv2 :is(.btn, .card__see-all):not(.btn--round):not(.btn--sm-round):not(.btn--round--sm):not(.btn--demo-play),
body.is-chaosapi :is(.btn, .card__see-all):not(.btn--round):not(.btn--sm-round):not(.btn--round--sm):not(.btn--demo-play) {
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .48),
                0 3px 10px rgba(10, 8, 11, .32),
                0 0 9px rgba(255, 173, 22, .20) !important;
    transition: background-color .2s ease, box-shadow .2s ease,
                border-color .2s ease !important;
}

/* Gold buttons keep the gold treatment rather than inheriting a blue frame. */
body.is-chaosapiv2 .btn.btn--brand:not(.btn--round):not(.btn--sm-round),
body.is-chaosapi .btn.btn--brand:not(.btn--round):not(.btn--sm-round) {
    box-shadow: inset 0 0 0 1px var(--rsv2-gold-edge),
                0 3px 12px rgba(105, 74, 20, .34),
                0 0 10px rgba(214, 166, 69, .24) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.is-chaosapiv2 :is(.btn, .card__see-all):not(.btn--round):not(.btn--sm-round):not(.btn--round--sm):not(.btn--demo-play):not(:disabled):hover,
    body.is-chaosapi :is(.btn, .card__see-all):not(.btn--round):not(.btn--sm-round):not(.btn--round--sm):not(.btn--demo-play):not(:disabled):hover {
        box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .84),
                    0 4px 13px rgba(255, 173, 22, .36),
                    0 0 14px var(--rsv2-blue-hover) !important;
    }
    body.is-chaosapiv2 .btn.btn--brand:not(.btn--round):not(.btn--sm-round):not(:disabled):hover,
    body.is-chaosapi .btn.btn--brand:not(.btn--round):not(.btn--sm-round):not(:disabled):hover {
        box-shadow: inset 0 0 0 1px rgba(255, 228, 156, .95),
                    0 4px 15px rgba(184, 123, 23, .35),
                    0 0 15px rgba(231, 184, 72, .28) !important;
    }
}

body.is-chaosapiv2 :is(.btn, .card__see-all):disabled,
body.is-chaosapi :is(.btn, .card__see-all):disabled {
    box-shadow: none !important;
}

body.is-chaosapiv2 :is(.btn, .card__see-all, .app-menu__item > a, .app-breadcrumbs .nav-item > a):focus-visible,
body.is-chaosapi :is(.btn, .card__see-all, .app-menu__item > a, .app-breadcrumbs .nav-item > a):focus-visible {
    outline: 2px solid #f4d077 !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.is-chaosapiv2 :is(.btn, .card__see-all, .app-menu__item > a, .app-breadcrumbs .nav-item > a),
    body.is-chaosapi :is(.btn, .card__see-all, .app-menu__item > a, .app-breadcrumbs .nav-item > a) {
        transition: none !important;
    }
}

/* PERMATA757 - ROYAL SAPPHIRE FRAME GLOW V4
   Refinement: align top strips to the content width, add inner separators,
   and make homepage section cards darker so the glow frame is more visible
   on both desktop and mobile.
*/

:root {
    --rsv2-shell-max: 1169px;
    --rsv2-shell-radius: 18px;
    --rsv2-frame-bg: linear-gradient(180deg, rgba(225, 129, 18, .94) 0%, rgba(33, 21, 15, .97) 100%);
    --rsv2-frame-bg-dark: linear-gradient(180deg, rgba(225, 129, 18, .96) 0%, rgba(10, 8, 11, .99) 100%);
    --rsv2-frame-border: rgba(255, 173, 22, .55);
    --rsv2-frame-glow: rgba(255, 173, 22, .22);
    --rsv2-divider: linear-gradient(180deg, rgba(255, 173, 22, .06) 0%, rgba(255, 173, 22, .42) 20%, rgba(255, 173, 22, .68) 50%, rgba(255, 173, 22, .42) 80%, rgba(255, 173, 22, .06) 100%);
}

/* 1) Desktop top menu strip aligns with the main content area. */
@media (min-width: 1024px) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d {
        width: 100% !important;
        max-width: var(--rsv2-shell-max) !important;
        margin: 0.4rem auto 0.7rem !important;
        overflow: hidden;
        box-sizing: border-box;
    }
}

/* Source-verified desktop classes (header.blade.php).
   Remove the original 1rem margin on every item: 12 margins made the
   centered navigation overflow while its frame was narrower than .container. */
@media (min-width: 1024px) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        justify-content: space-between !important;
        padding: 0 !important;
    }
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item > a {
        min-width: 0;
        padding-inline: 3px !important;
        box-sizing: border-box;
    }
    body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a > span {
        white-space: nowrap;
        max-width: 100%;
        font-size: clamp(11px, .85vw, 14px);
    }
}

/* 2) Shared outer frame for both desktop and mobile icon strips. */
body.is-chaosapiv2 nav.app-menu.app-menu--d,
body.is-chaosapi nav.app-menu {
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(225, 129, 18, .95) 0%, rgba(33, 21, 15, .98) 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 173, 22, .72),
        inset 0 0 18px rgba(255, 173, 22, .12),
        0 0 18px rgba(255, 173, 22, .20),
        0 10px 24px rgba(10, 8, 11, .36) !important;
}

body.is-chaosapiv2 nav.app-menu.app-menu--d > ul,
body.is-chaosapi nav.app-menu > ul {
    border-radius: 16px;
    overflow: hidden;
    align-items: stretch;
}

/* 3) Each top icon item stays inside the same frame with vertical separators. */
body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item,
body.is-chaosapi nav.app-menu .app-menu__item {
    position: relative;
    display: flex;
    align-items: stretch;
}

body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item + .app-menu__item::before,
body.is-chaosapi nav.app-menu .app-menu__item + .app-menu__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--rsv2-divider);
    pointer-events: none;
}

body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a,
body.is-chaosapi nav.app-menu .app-menu__item > a {
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    padding-inline: 14px !important;
    background: transparent !important;
}

body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item:first-of-type > a,
body.is-chaosapi nav.app-menu .app-menu__item:first-of-type > a {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}

body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item:last-of-type > a,
body.is-chaosapi nav.app-menu .app-menu__item:last-of-type > a {
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a.app-link--active,
body.is-chaosapi nav.app-menu .app-menu__item > a.app-link--active {
    background: linear-gradient(180deg, rgba(255, 173, 22, .16), rgba(225, 129, 18, .22)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .18) !important;
}

@media (hover: hover) and (pointer: fine) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a:hover,
    body.is-chaosapi nav.app-menu .app-menu__item > a:hover {
        background: linear-gradient(180deg, rgba(255, 173, 22, .14), rgba(225, 129, 18, .20)) !important;
        box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .16) !important;
    }
}

/* 4) Mobile icon strip stays aligned and wrapped inside the viewport neatly. */
@media (max-width: 1023.98px) {
    body.is-chaosapi nav.app-menu {
        left: 0 !important;
        width: 100% !important;
        margin: 10px 0 14px !important;
        overflow: hidden;
    }

    body.is-chaosapi nav.app-menu > ul {
        padding-inline: 2px;
    }

    body.is-chaosapi nav.app-menu .app-menu__item > a {
        min-width: 102px;
        padding-inline: 12px !important;
    }

    body.is-chaosapi nav.app-menu .app-menu__item + .app-menu__item::before {
        top: 10px;
        bottom: 10px;
    }
}

/* 5) Desktop and mobile homepage sections get darker fills + glow frames,
      so each homepage block looks separated and the glow is visible. */
body.is-chaosapiv2 section.home > article.card,
body.is-chaosapi section.home > article.card {
    position: relative;
    margin-bottom: 16px;
    border-radius: var(--rsv2-shell-radius) !important;
    overflow: hidden;
    background: var(--rsv2-frame-bg-dark) !important;
    box-shadow:
        inset 0 0 0 1px var(--rsv2-frame-border),
        inset 0 0 16px rgba(255, 173, 22, .10),
        0 0 16px var(--rsv2-frame-glow),
        0 10px 22px rgba(10, 8, 11, .32) !important;
}

body.is-chaosapiv2 section.home > article.card > .card__header,
body.is-chaosapi section.home > article.card > .card__header {
    background: linear-gradient(180deg, rgba(225, 129, 18, .95) 0%, rgba(225, 129, 18, .96) 100%) !important;
    border-bottom: 1px solid rgba(255, 173, 22, .28) !important;
}

body.is-chaosapiv2 section.home > article.card > .card__body,
body.is-chaosapi section.home > article.card > .card__body {
    background: rgba(33, 21, 15, .20) !important;
}

/* Special handling for the split cards on mobile so each homepage section still
   feels like a separate framed block, not fused with surrounding content. */
@media (max-width: 1023.98px) {
    /* Source-verified fix: royalty theme defines .home .card {margin-top:-20px}.
       Clear the overlap, then introduce a real visible gap between sections. */
    body.is-chaosapi section.home > article.card {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        border-radius: 16px !important;
        isolation: isolate;
    }
}

/* 6) The small homepage nav (Beranda/Eksklusif/...) also gets a darker shell so
      it doesn't look brighter than the frame. */
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d,
body.is-chaosapi .app-header__extra .app-breadcrumbs,
body.is-chaosapi section.home nav.app-breadcrumbs {
    background: linear-gradient(180deg, rgba(33, 21, 15, .94) 0%, rgba(33, 21, 15, .98) 100%) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 173, 22, .48),
        inset 0 0 12px rgba(255, 173, 22, .10),
        0 0 12px rgba(255, 173, 22, .16) !important;
}

/* 7) On the homepage, keep the section backgrounds darker than the glow frame. */
body.is-chaosapiv2 section.home .card--light,
body.is-chaosapi section.home .card--light,
body.is-chaosapi section.home .card--primary,
body.is-chaosapi section.home .card--split {
    background-color: transparent !important;
}

/* 8) Prevent any framed homepage block from stretching visually wider than
      the intended centered content column on desktop. */
@media (min-width: 1024px) {
    body.is-chaosapiv2 section.home.home--d,
    body.is-chaosapiv2 section.home.home--d > * {
        max-width: 100%;
    }
}

/* Recolor of p757-royal-nav-frame-v3.css; {"hex": 0, "rgb": 19, "hsl": 0} */
/* PERMATA757 | Royal Sapphire Navigation Frame V3
 * Memakai markup Laravel AKTIF dari INFINITY.tar(3).gz.
 * Berlaku hanya saat tema royal-sapphire-gold dipilih.
 * Tidak mengubah link, JS, urutan, form, ukuran game, atau isi menu.
 * Dimuat SETELAH css/permata757-royal-ui-v2.css.
 */
:root {
    --p757-nav-frame: rgba(255, 173, 22, .88);
    --p757-nav-divider: rgba(255, 173, 22, .29);
    --p757-nav-glow: rgba(255, 173, 22, .32);
}

/* SATU frame menu kategori. Selector desktop dan HP sesuai Blade terkini. */
body.is-chaosapiv2 nav.app-menu.app-menu--d,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end {
    position: relative;
    border: 1px solid var(--p757-nav-frame) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(33, 21, 15, .84), rgba(10, 8, 11, .88)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .24),
                0 0 7px var(--p757-nav-glow),
                0 0 15px rgba(255, 173, 22, .18) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Fisik menu tetap SATU baris yang bisa digeser pada HP. */
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul {
    display: flex !important;
    align-items: stretch !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* Hilangkan frame kecil milik tema V1: tinggal satu batas luar dan divider. */
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item > a,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item > a {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}
/* Separator antarkategori, bukan border di masing-masing box. */
body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item + li.app-menu__item::before,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item + li.app-menu__item::before {
    content: "";
    position: absolute;
    top: 14%;
    bottom: 14%;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--p757-nav-divider) 24%, rgba(255, 173, 22, .50) 50%, var(--p757-nav-divider) 76%, transparent);
    pointer-events: none;
    z-index: 1;
}
/* Highlight TANPA membuat kotak baru. */
body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a.app-link--active,
body.is-chaosapi .home nav.app-menu.app-menu--shadow-end .app-menu__item > a.app-link--active {
    background-color: rgba(255, 173, 22, .16) !important;
}
@media (hover: hover) and (pointer: fine) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d .app-menu__item > a:hover,
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end .app-menu__item > a:hover {
        background-color: rgba(255, 173, 22, .23) !important;
        box-shadow: none !important;
    }
}
/* Desktop: kolom seimbang dan tak keluar frame. */
@media (min-width: 1024px) {
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item > a {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 2px !important;
    }
    body.is-chaosapiv2 nav.app-menu.app-menu--d > ul > li.app-menu__item > a > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* Mobile: tetap lima kategori terlihat, yang lain boleh digeser. */
@media (max-width: 1023.98px) {
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end {
        left: 0 !important;
        width: 100% !important;
    }
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item {
        flex: 0 0 20% !important;
        min-width: 0 !important;
    }
    body.is-chaosapi .home nav.app-menu.app-menu--shadow-end > ul > li.app-menu__item > a {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Urutan/menu teks beranda: PIL TERPISAH dan berjarak, bukan satu batang. */
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d > ul,
body.is-chaosapi .app-header__extra nav.app-breadcrumbs > ul {
    gap: 5px !important;
    align-items: center !important;
    box-sizing: border-box;
}
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item:not(.nav-item--fill),
body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item:not(.nav-item--fill) {
    flex: 0 0 auto !important;
    height: auto !important;
}
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item:not(.nav-item--fill) > a,
body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item:not(.nav-item--fill) > a {
    min-height: 28px;
    padding: 4px 10px !important;
    border: 1px solid rgba(255, 173, 22, .38) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(225, 129, 18, .65), rgba(33, 21, 15, .70)) !important;
    color: #f4f8ff;
    box-shadow: inset 0 0 0 1px rgba(255, 173, 22, .15),
                0 0 7px rgba(255, 173, 22, .15) !important;
    box-sizing: border-box;
}
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item > a.app-link--active,
body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item > a.app-link--active {
    border-color: rgba(240, 198, 100, .75) !important;
    color: #ffe08b !important;
    box-shadow: 0 0 7px rgba(239, 188, 77, .17) !important;
}
@media (hover:hover) and (pointer:fine) {
    body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d .nav-item > a:hover,
    body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item > a:hover {
        border-color: rgba(255, 173, 22, .82) !important;
        box-shadow: 0 0 11px rgba(255, 173, 22, .29) !important;
    }
}
/* Frame yang mengelilingi grup pill desktop, tanpa menggabungkan itemnya. */
body.is-chaosapiv2 nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 3px 5px;
    border-radius: 13px;
    border: 1px solid rgba(255, 173, 22, .32);
    box-shadow: 0 0 10px rgba(255, 173, 22, .17);
    box-sizing: border-box;
}
/* HP: jangan menghalangi menu hamburger pada header. */
@media (max-width: 1023.98px) {
    body.is-chaosapi .app-header__extra nav.app-breadcrumbs > ul {
        gap: 4px !important;
    }
    body.is-chaosapi .app-header__extra nav.app-breadcrumbs .nav-item:not(.nav-item--fill) > a {
        min-height: 29px;
        padding: 3px 9px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.is-chaosapiv2 nav.app-menu .app-menu__item > a,
    body.is-chaosapi nav.app-menu .app-menu__item > a,
    body.is-chaosapiv2 nav.app-breadcrumbs .nav-item > a,
    body.is-chaosapi nav.app-breadcrumbs .nav-item > a {
        transition: none !important;
    }
}

/* Recolor of p757-game-hover-v1.css; {"hex": 2, "rgb": 9, "hsl": 0} */
/* PERMATA757 – Game hover/tap overlay V1. Visual only. */
/* Lihat semua: bayangan biru mengikuti warna tombol bawaan. */
a.card__see-all {
  box-shadow: 0 3px 0 rgba(225, 129, 18,.9), 0 5px 10px rgba(0,0,0,.32), 0 0 12px rgba(255, 173, 22,.28) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  a.card__see-all:hover, a.card__see-all:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(225, 129, 18,.9), 0 8px 18px rgba(0,0,0,.42), 0 0 20px rgba(255, 173, 22,.48) !important;
  }
}
a.card__see-all:active { transform: translateY(1px); }
/* Overlay hanya di bagian foto, tidak pada nama game atau link lainnya. */
.p757-game-hover-ready .game-item,
.p757-game-hover-ready .casino-game__container { position:relative; isolation:isolate; }
.p757-play-overlay {
  position:absolute; inset:0; z-index:35;
  display:flex; justify-content:center; align-items:center;
  overflow:hidden; border-radius:inherit;
  opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(10, 8, 11,.43);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:opacity .18s ease, visibility .18s ease;
}
.p757-play-control {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; color:white; text-shadow:0 1px 5px rgba(0,0,0,.65);
  font-size:12px; font-weight:700; line-height:1.1;
  pointer-events:none; user-select:none;
}
.p757-play-icon {
  width:50px; height:50px; border-radius:50%;
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(145deg,#ffad16,#ffad16);
  color:#fff; font-size:22px; line-height:1;
  box-shadow:0 0 0 6px rgba(255, 173, 22,.17),0 5px 24px rgba(255, 173, 22,.5);
  padding-left:3px;
}
.p757-game-hover-ready > a:focus-visible .p757-play-overlay,
.p757-game-hover-ready.p757-play-active .p757-play-overlay {opacity:1;visibility:visible;}
.p757-game-hover-ready.p757-play-active .p757-play-control {pointer-events:auto;}
@media (hover:hover) and (pointer:fine) {
 .p757-game-hover-ready > a:hover .p757-play-overlay {opacity:1;visibility:visible;}
 .p757-game-hover-ready > a:hover .p757-play-control {pointer-events:auto;}
}
@media(max-width:480px) {
 .p757-play-icon { width:38px; height:38px; font-size:17px; box-shadow:0 0 0 4px rgba(255, 173, 22,.18),0 4px 14px rgba(255, 173, 22,.45); }
 .p757-play-control {font-size:11px;gap:3px;}
}
@media(prefers-reduced-motion:reduce){a.card__see-all,.p757-play-overlay {transition:none!important}}


body.is-chaosapi, body.is-chaosapiv2 { color: var(--tm-gold); background-color:var(--tm-bg) !important; }
body.is-chaosapi :is(.app-header,.app-footer), body.is-chaosapiv2 :is(.app-header,.app-footer) {
    border-color:var(--tm-edge) !important;
}
body.is-chaosapi :is(.btn--dark,.btn--light,.btn--flex,.btn--primary),
body.is-chaosapiv2 :is(.btn--dark,.btn--light,.btn--flex,.btn--primary) {
    color: var(--tm-gold) !important;
}
body.is-chaosapi :is(.btn--dark,.btn--light,.btn--flex),
body.is-chaosapiv2 :is(.btn--dark,.btn--light,.btn--flex) {
    background-color:var(--tm-panel) !important;
    border-color:var(--tm-edge) !important;
}
body.is-chaosapi :is(.btn--brand,.btn--accent,.btn--accent-secondary),
body.is-chaosapiv2 :is(.btn--brand,.btn--accent,.btn--accent-secondary) {
    background-color:var(--tm-accent) !important;
    color:var(--tm-ink) !important;
    border-color:var(--tm-gold) !important;
}
body.is-chaosapi :is(.btn--brand,.btn--accent,.btn--accent-secondary):hover,
body.is-chaosapiv2 :is(.btn--brand,.btn--accent,.btn--accent-secondary):hover {
    background-color:var(--tm-gold) !important;
    color:var(--tm-ink) !important;
}
body.is-chaosapi :is(.btn--dark,.btn--light,.btn--flex,.btn--primary,.btn--brand,.btn--accent) :is(span,i),
body.is-chaosapiv2 :is(.btn--dark,.btn--light,.btn--flex,.btn--primary,.btn--brand,.btn--accent) :is(span,i) {
    color:inherit !important;
}
body.is-chaosapi nav.app-breadcrumbs .nav-item > a,
body.is-chaosapiv2 nav.app-breadcrumbs .nav-item > a {
    color:var(--tm-gold) !important;
    background:linear-gradient(180deg,var(--tm-panel),var(--tm-bg)) !important;
    border-color:var(--tm-edge) !important;
    box-shadow:inset 0 0 0 1px var(--tm-edge) !important;
}
body.is-chaosapi nav.app-breadcrumbs .nav-item > a.app-link--active,
body.is-chaosapiv2 nav.app-breadcrumbs .nav-item > a.app-link--active {
    background:linear-gradient(180deg,var(--tm-accent),var(--tm-edge)) !important;
    color:var(--tm-ink) !important;
    box-shadow:inset 0 0 0 1px var(--tm-gold),0 0 12px var(--tm-edge) !important;
}
body.is-chaosapi nav.app-menu, body.is-chaosapiv2 nav.app-menu {
    background:linear-gradient(180deg,var(--tm-panel),var(--tm-bg)) !important;
    box-shadow:inset 0 0 0 1px var(--tm-edge),0 0 12px var(--tm-edge) !important;
}
body.is-chaosapi :is(.card__see-all,.slot-showcase__see-all),
body.is-chaosapiv2 :is(.card__see-all,.slot-showcase__see-all) {
    color:var(--tm-gold) !important;
    border-color:var(--tm-edge) !important;
    background-color:var(--tm-panel) !important;
}
body.is-chaosapi :is(.card__see-all,.slot-showcase__see-all):hover,
body.is-chaosapiv2 :is(.card__see-all,.slot-showcase__see-all):hover {
    color:var(--tm-ink) !important;
    background-color:var(--tm-accent) !important;
}
body.is-chaosapi :is(.slot-showcase,.hot-slots-card,.card--hot-slots),
body.is-chaosapiv2 :is(.slot-showcase,.hot-slots-card,.card--hot-slots) {
    background-color:var(--tm-panel) !important;
    border-color:var(--tm-edge) !important;
}
body.is-chaosapi :is(input,textarea,select),body.is-chaosapiv2 :is(input,textarea,select) {accent-color:var(--tm-accent);}
/* No image replacement, no width/height/position rules, no universal * selectors. */