/* ============================================================================
   KOTAK GAME 2026 — halaman provider (/games/<provider>/).
   Dimuat PALING AKHIR di provider_landing.html, jadi menimpa lapisan lama
   (frontend-lux.css, frontend-redesign-2026.css, provider-pagination.css).
   Latar belakang: kotak lama dirancang untuk menampung tiga baris teks
   (judul + RTP + pita "TIPS/POLA"). Pita itu sudah dihapus, sehingga kotaknya
   menyisakan ruang kosong dan judulnya dikecilkan sampai 6px di ponsel supaya
   muat. Rancangan ini menyusun ulang: artwork jadi poster penuh tanpa bingkai
   dalam, judul kembali terbaca, RTP jadi satu baris label + bar melebar penuh.
   Semua ukuran memakai `!important` seperlunya saja — hanya di tempat lapisan
   lama memaksa nilainya.
   ========================================================================= */

/* ------------------------------------------------------------------ kisi */
.provider-game-grid.games{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

/* ----------------------------------------------------------------- kartu */
.provider-game-grid .game-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg,#1b2039,#111527);
  box-shadow:0 10px 26px rgba(4,8,20,.26);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.provider-game-grid .game-card:hover,
.provider-game-grid .game-card:focus-within{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--gold,#e1b94f) 48%,transparent);
  box-shadow:0 18px 38px rgba(4,8,20,.44);
}
/* Bingkai berpendar milik frontend-lux dimatikan: kartu ini sudah punya
   bingkainya sendiri dan dua lapisan itu saling tumpuk. */
.provider-game-grid .game-card:before{display:none}

/* --------------------------------------------------------------- artwork */
.provider-game-grid .cover{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:0;
  background:#0b1122;
}
.provider-game-grid .cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}
/* Gradasi gelap bawaan di kaki artwork dihapus — di sini artwork sudah
   berbatasan langsung dengan pelat info, jadi gradasinya hanya membuat
   bagian bawah gambar terlihat kotor. */
.provider-game-grid .cover:after{display:none}

.provider-game-grid .hot-game-badge{
  z-index:4;
  top:8px;
  left:8px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
  letter-spacing:.07em;
}
.provider-game-grid .hot-game-badge i{font-size:9px}

/* ------------------------------------------------------- tombol main */
.provider-game-grid .game-overlay{
  position:absolute;
  z-index:3;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(7,11,24,.72);
  opacity:0;
  transition:opacity .2s ease;
}
.provider-game-grid .game-card:hover .game-overlay,
.provider-game-grid .game-card:focus-within .game-overlay{opacity:1}
.provider-game-grid .game-overlay a{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  text-decoration:none;
}
.provider-game-grid .game-overlay i{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding-left:3px;
  border-radius:999px;
  background:var(--gold,#e1b94f);
  color:#0d1a24;
  font-size:15px;
  font-style:normal;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* -------------------------------------------------------- pelat info */
.provider-game-grid .game-info{
  min-height:0;
  height:auto;
  display:block;
  flex:1 1 auto;
  padding:9px 10px 10px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
  text-align:left;
}
.provider-game-grid .game-info>div{min-width:0;width:100%}
.provider-game-grid .game-info h3{
  display:block;
  max-width:100%;
  margin:0;
  overflow:hidden;
  color:#f1f4fb;
  font-size:11.5px;
  font-weight:800;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.provider-game-grid .game-info .game-rtp{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  justify-items:stretch;
  gap:5px;
  width:100%;
  margin:8px 0 0;
  font-size:8.5px;
  text-align:left;
}
.provider-game-grid .game-rtp span{
  grid-row:1;
  display:block;
  color:currentColor;
  font-weight:900;
  letter-spacing:.05em;
}
.provider-game-grid .game-rtp>i{
  grid-row:2;
  width:100%;
  height:4px;
  display:block;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.1);
}
.provider-game-grid .game-rtp>i>b{
  display:block;
  height:100%;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}

/* --------------------------------------------------------- tablet */
@media(max-width:1100px){
  .provider-game-grid.games{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
@media(max-width:860px){
  .provider-game-grid.games{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}

/* --------------------------------------------------------- ponsel
   Tiga kolom, bukan empat. Empat kolom dulu dipakai supaya pita TIPS/POLA
   ikut muat; tanpa pita itu, tiga kolom membuat artwork dan judulnya
   benar-benar terbaca di layar kecil. */
@media(max-width:640px){
  .provider-game-grid.games{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .provider-game-grid .game-card{padding:0;border-radius:11px}
  .provider-game-grid .cover{border-radius:0}
  .provider-game-grid .hot-game-badge{top:5px;left:5px;padding:3px 6px;font-size:6px}
  .provider-game-grid .hot-game-badge i{font-size:7px}
  .provider-game-grid .game-info{min-height:0;height:auto;padding:6px 7px 7px}
  .provider-game-grid .game-info h3{font-size:9px;line-height:1.25}
  .provider-game-grid .game-info .game-rtp{gap:4px;margin-top:5px;font-size:7px}
  .provider-game-grid .game-rtp>i{width:100%;height:3px}
  /* Di ponsel tidak ada hover: lapisan gelap dimatikan supaya artwork tetap
     terlihat, tautannya tetap menutupi seluruh kartu. */
  .provider-game-grid .game-overlay{opacity:1;background:transparent}
  .provider-game-grid .game-overlay a{position:absolute;inset:0;font-size:0}
  .provider-game-grid .game-overlay i{display:none}
}
@media(max-width:380px){
  .provider-game-grid.games{grid-template-columns:repeat(2,minmax(0,1fr))}
  .provider-game-grid .game-info h3{font-size:10px}
  .provider-game-grid .game-info .game-rtp{font-size:8px}
}