:root{
  --bg:#0b1320; --panel:#0f1b2b; --card:#101c2d; --muted:#9db1c9; --text:#eaf2ff;
  --line:#173154; --brand:#2d6cf6; --ok:#2dd36f; --danger:#f43f5e; --ink:#0a1422;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background: url(https://ik.imagekit.io/pacmanone/BAMTOTO/bamtoto-background.png?updatedAt=1763023484721);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}

/* Header */
.header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, #ff0000, #000000);border-bottom:1px solid #ffc800;backdrop-filter:blur(8px)}
.container{max-width:1220px;margin:auto;padding:0 16px}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand img{height:36px;width:auto;object-fit:contain}
.h-actions{display:flex;gap:10px}
.btn{appearance:none;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;color:#fff;background:#433b1e;box-shadow:0 6px 16px #ff0000, inset 0 -2px 0 #0004}
.btn.alt{background:#ff0000}

/* === HERO (tuned for 3:2) === */
.slider{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:16px; background:var(--ink);

  /* dari 16/9 -> ke 3/2 biar tidak terpotong bawah */
  aspect-ratio: 3 / 2;
  max-height: 880px;        /* boleh sesuaikan 760–980 */
}

.slider .slide-track{
  display:flex; height:100%;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.slider .slide{ flex:0 0 100%; height:100%; }

/* Fokus ke bawah supaya teks banner selalu kebaca */
.slider .slide img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 72%;   /* coba 68–78% kalau masih kepotong */
}

@media (max-width:560px){
  .slider{ aspect-ratio:auto; }
  .slider .slide{ height:auto; }
  .slider .slide img{
    width:100%;
    height:auto;
    object-fit:contain;   /* tidak memotong */
    background:#ff0000;   /* warna belakang */
  }
}


.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:8px;justify-content:center}
.dot{width:8px;height:8px;border-radius:50%;background:#ffffff40;border:1px solid #fff4}
.dot.active{background:#fff}
/* Desktop nav buttons */
.nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px;pointer-events:none}
.nav button{pointer-events:auto;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#0b1a2fb0;color:#fff;display:grid;place-items:center;cursor:pointer}
@media (max-width:768px){ .nav{display:none} }

/* Provider belt */
.belt{margin-top:10px;background:linear-gradient(180deg, #ff0000, #000000);border:1px solid #fff200;border-radius:12px;padding:10px 12px}
.belt-row{display:flex;gap:14px;overflow:auto;scrollbar-width:none}
.belt-row::-webkit-scrollbar{display:none}
.pv{flex:0 0 auto;background:#d20909;border:1px solid #ffc800;padding:8px 14px;border-radius:12px;display:flex;align-items:center;gap:10px;cursor:pointer}
.pv.active{outline:2px solid #2b82ff66}
.pv img{height:22px;width:auto;object-fit:contain}
/* posisi & tampilan tombol panah */
.belt{ position:relative; }
.belt .belt-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line);
  background:#0b1627cc; color:#cfe2ff;
  display:none; place-items:center; cursor:pointer;
  backdrop-filter:blur(6px);
}
.belt .belt-nav.prev{ left:6px; }
.belt .belt-nav.next{ right:6px; }
.belt .belt-nav[disabled]{ opacity:.35; cursor:default; }
.belt .belt-nav svg{ width:18px; height:18px; }

/* tampilkan tombol pada desktop / pointer mouse */
@media (pointer:fine) and (min-width: 768px){
  .belt .belt-nav{ display:grid; }
}

/* haluskan geser + snap antar item */
.belt-row{ scroll-snap-type:x mandatory; }
.pv{ scroll-snap-align:start; }

/* Info + search */
.updatebar{margin-top:10px;background:linear-gradient(180deg, #ff0000, #090000);border:1px solid #ffc800;padding:10px 12px;border-radius:10px;color:#d0e2ff;font-size:13px}
.h2row{display:flex;align-items:center;justify-content:space-between;margin:14px 0 10px}
.h2row h2{margin:0;font-size:16px}
.search{display:flex;align-items:center;gap:10px;background:#ffffff;border:1px solid #fff200;padding:10px 12px;border-radius:999px;width:min(420px,60vw)}
.search input{all:unset;color:#d7e8ff;flex:1}

/* default: tetap responsif dan 1 hasil tidak melebar */
.grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  justify-content:start;
  align-content:start;
}

/* desktop: fix 5 kolom */
@media (min-width:1100px){
  .grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* kartu isi penuh track (hapus/buang max-width:260px) */
.card{ width:100%; } 

@media (max-width:600px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
}
@media (max-width:380px){ .grid{gap:8px} }

.card{background:linear-gradient(180deg, #ff0000, #000000);border:1px solid #fff200;border-radius:16px;overflow:hidden;box-shadow:0 6px 22px #ff0000;display:flex;flex-direction:column}
.thumb{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg, #ff0000, #000000);display:grid;place-items:center}
.thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center}
.badge{position:absolute;left:10px;top:10px;background:#0b2a12;color:#9cf3b6;border:1px solid #165428;border-radius:999px;padding:6px 10px;font-size:12px;display:flex;align-items:center;gap:6px}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--ok)}
.badge.hot{ background:#ff0000; color:#ffd7de; border-color:#433b1e; }
/* varian badge */
.badge.hot{ background:#ff0000; color:#ffd7de; border-color:#433b1e; }
.badge.top{ background:#ff0000; color:#e6dbff; border-color:#433b1e; }

.meta{padding:12px}
.title{margin:0 0 6px;font-weight:700}
.provider{color:var(--muted);font-size:12px;margin-bottom:10px}


/* RTP (animated bar) */
.rtp{display:flex;align-items:center;gap:10px}
.bar{position:relative;flex:1;height:8px;background:#0b2037;border-radius:999px;overflow:hidden}
.bar-in{height:100%;width:0;background:linear-gradient(90deg,#2bd96c,#1aa5ff);background-size:200% 100%;animation:progressMove 1.4s linear infinite;transition:width .8s ease}
@keyframes progressMove{0%{background-position:0 0}100%{background-position:200% 0}}
.rtp small{opacity:.85}

/* Actions – tombol rapi */
.actions{display:flex;gap:10px;padding:12px 12px 14px}
.button{flex:1;border:none;border-radius:12px;padding:12px 0;font-weight:800;cursor:pointer}
.btn-pola{background:var(--danger);color:#fff}
.btn-main{background:#17253a;color:#eaf2ff}

/* Footer */
.foot{color:#8ea3be;text-align:center;padding:16px 0 30px}

/* Modal Pola — revamp */
body.lock{ overflow:hidden; }

.modal{
  position:fixed; inset:0; display:grid; place-items:center;
  background: radial-gradient(1200px 800px at 50% 10%, #000 0%, #220b0bee 55%, #000 70%, #220b0bf6 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding:16px; z-index:60;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal.open{ opacity:1; pointer-events:auto; }

.sheet{
  width:min(920px,96vw); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg, #000000, #ff0000);
  border:1px solid #fff200; border-radius:18px;
  box-shadow:0 24px 80px #0009, 0 0 0 1px #0004 inset;
  transform:translateY(10px) scale(.995); transition:transform .28s ease;
}
.modal.open .sheet{ transform:none; }

/* top accent */
.sheet::before{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg, #ff0000, #ff0000 50%, #ff0000);
  border-radius:18px 18px 0 0;
}

.sheet header{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg, #000000, #ff0000);
  border-bottom:1px solid #173154;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px;
}
.sheet h3{ margin:0; font-size:18px; letter-spacing:.3px; }
.close{
  background:#ff0000; border:1px solid #ffc800; color:#d9ebff;
  border-radius:10px; padding:8px 10px; cursor:pointer;
  transition:transform .12s ease, background .2s;
}
.close:hover{ transform:translateY(-1px); background:#ad2121; }

.sheet .body{ padding:14px 16px 18px; }

/* key-value lines */
.kv{
  display:flex; align-items:center; gap:10px; margin:10px 0;
  font-size:14px;
}
.chip{
  background:#13233a; border:1px solid #1c3459; color:#cfe2ff;
  border-radius:999px; padding:6px 10px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); }

/* pola blocks */
.steps-wrap {
  display: grid;
  grid-template-columns: 1fr 260px;  /* default desktop */
  gap: 20px;
}

/* Mobile: jadi 1 kolom full */
@media (max-width: 768px){
  .steps-wrap {
    grid-template-columns: 1fr;   /* stack jadi 1 kolom */
  }
  .p-info {
    order: -1;        /* pindahin info game ke atas */
  }
}
.steps-grid{display:grid;gap:12px}
.step-box{
  background:#0f2138;border:1px solid #1a3559;
  border-radius:12px;padding:12px;
  display:flex;align-items:center;justify-content:space-between;
}
.step-num{
  background:#1a2c45;border:1px solid #284a75;
  padding:6px 10px;border-radius:8px;font-weight:700;font-size:12px;
}
.step-label{font-weight:600;font-size:14px}
.step-status{display:flex;gap:6px}
.step-status .chk,.step-status .x{
  width:28px;height:24px;display:grid;place-items:center;
  border-radius:6px;font-weight:700;font-size:12px;
}
.step-status .chk{background:#12361e;color:#7dffa9;border:1px solid #1d5b35}
.step-status .x{background:#3a0c10;color:#ff97a3;border:1px solid #6c1f25}

.p-info{
  background:linear-gradient(180deg, #ff0000, #000000);border:1px solid #1a3559;border-radius:12px;padding:12px
}
.p-info img{width:100%;border-radius:8px;margin-bottom:10px}
.p-info h4{margin:6px 0;font-size:15px}
.p-info .kv{margin:6px 0;font-size:13px;display:flex;justify-content:space-between}
.p-info .vol{color:#433b1e;font-size:16px}

.pola{ display:grid; gap:12px; margin:14px 0 12px; }
/* --- tweaks Pola --- */
.pola-line{
  display:grid;
  grid-template-columns: auto 1fr auto; /* <— dari: 1fr auto */
  align-items:center;
  gap:12px; background:#ff0000; border:1px solid #1a3559; border-radius:12px; padding:12px 12px;
}
.step{
  background:#252421; border:1px solid #ffc800; color:#d9ebff;
  border-radius:8px; padding:6px 8px; font-size:12px; font-weight:800; letter-spacing:.3px;
}
.pola-info{
  display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px;
}
.chip.note{
  background:#0c1b2e; border-color:#183055; color:#d0e2ff;
}
.pola-line strong{ font-size:14px; font-weight:700; letter-spacing:.2px; }
.combo{ display:flex; gap:8px; }
.chk,.x{
  width:22px; height:22px; border-radius:6px;
  display:grid; place-items:center; font-size:12px; font-weight:800;
  box-shadow:inset 0 -2px 0 #0003;
}
.chk{ background:#12361e; color:#7dffa9; border:1px solid #1d5b35; }
.x  { background:#3a0c10; color:#ff97a3; border:1px solid #6c1f25; }

/* online counter line */
.kv .live{
  display:flex; align-items:center; gap:8px; font-weight:700;
}
.kv .live .on{ width:8px; height:8px; border-radius:50%; background:var(--ok); }

/* table area */
.table-wrap{
  max-height:50vh; overflow:auto; border:1px solid var(--line);
  border-radius:12px; position:relative; background:#0b1627;
}
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:10px 12px; font-size:13px; border-bottom:1px solid #132946; }
.table th{
  position:sticky; top:0; z-index:1; text-align:left;
  background:linear-gradient(180deg,#0f2138,#0e1c31);
  font-weight:700; letter-spacing:.2px;
}
.table tr:nth-child(even) td{ background:#0d1a2c; }
.table tbody tr:hover td{ background:#0f2138; }

/* subtle scrollbars */
.table-wrap::-webkit-scrollbar{ height:10px; width:10px; }
.table-wrap::-webkit-scrollbar-thumb{ background:#173154; border-radius:999px; }
.table-wrap::-webkit-scrollbar-track{ background:#0b1627; border-radius:999px; }

.modal .footnote{
  text-align:center; color:#8ea3be; margin:12px 0 2px; font-size:12px;
}

/* mobile sheet feel */
@media (max-width:560px){
  .sheet{ width:100%; max-height:94vh; border-radius:18px; }
  .sheet::before{ border-radius:18px 18px 0 0; }
}
/* ==== FIX: tombol sama tinggi & rapi ==== */
.card{display:flex;flex-direction:column}
.actions{
  margin-top:auto;                /* actions selalu nempel bawah kartu */
  display:grid;                   /* 2 kolom simetris */
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px 12px 14px;
}
.button{
  display:flex;align-items:center;justify-content:center;
  height:46px;                    /* tinggi konsisten */
  padding:0 12px;                 /* horizontal padding */
  border-radius:12px;
  font-weight:800; letter-spacing:.2px;
  white-space:nowrap;             /* cegah “POLA” jadi 2 baris */
  overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 6px 16px #0a162244,inset 0 -2px 0 #0003;
}
.btn-pola{background:#ff0000;color:#fff}
.btn-main{background:linear-gradient(180deg, #ff0000, #000000);color:#eaf2ff}

/* responsive tweak: hape kecil */
@media (max-width:360px){
  .button{height:42px;font-size:12px}
}

@media (max-width:560px){
  .slide img{height:220px}
  .h-actions .btn{padding:8px 12px}
}
/* === Floating CTA kiri-bawah — transparan & responsif === */
.float-cta{
  position: fixed;
  left: clamp(8px, 1.5vw, 16px);
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 90;

  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 12px);

  /* ukuran ikon auto responsif */
  --size: clamp(44px, 7vw, 64px);
}

/* item */
.float-cta .cta{
  width: var(--size);
  text-align: center;
  color: #eaf2ff;
  font-weight: 800;
  letter-spacing: .2px;
  will-change: transform;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
  animation: popIn .35s ease var(--d,0s) both, bob 3s ease-in-out calc(var(--d,0s) + .6s) infinite;
}

/* ikon transparan */
.float-cta .cta img{
  width: var(--size);
  height: var(--size);
  object-fit: contain;
  background: transparent;          /* <— transparan */
  border: 0;                        /* <— tanpa border */
  border-radius: 14px;              /* sudut lembut utk ikon non-bulat */
  transition: transform .18s ease, filter .18s ease;
}
.float-cta{
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
/* tampil saat ditekan */
.float-cta.open{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
/* matikan animasi saat hidden biar hemat */
.float-cta:not(.open) .cta{ animation: none; }

/* efek hover ringan di desktop */
@media (pointer:fine){
  .float-cta .cta:hover img{
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.65));
  }
}

/* label: tampil di desktop, sembunyi di mobile */
.float-cta .cta span{
  display: none;
  font-size: 11px;
  margin-top: 4px;
  opacity: .9;
}
@media (min-width: 900px){
  .float-cta .cta{ width: calc(var(--size) + 6px); }
  .float-cta .cta span{ display: block; }
}

/* animasi */
@keyframes popIn{from{opacity:0;transform:translateX(-10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* hormati preferensi user */
@media (prefers-reduced-motion: reduce){
  .float-cta .cta{ animation: none; }
}
.combo {
  display: flex;
  gap: 6px;
}
.combo .chk, 
.combo .x {
  width: 30px;          /* konsisten */
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}
/* Pill untuk label mode (Manual, Auto, Turbo) */
.badge-mode{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.3px;
  line-height:1;
  white-space:nowrap;                /* jangan pecah baris */
  max-width:40vw;                    /* batasi lebar di mobile */
  overflow:hidden; text-overflow:ellipsis;  /* potong rapi */
  box-sizing:border-box;
}
@media (max-width:420px){
  .badge-mode{ padding:5px 8px; font-size:11px; max-width:55vw; }
}

/* warna */
.badge-mode.manual{ background:#123c52; color:#4cd1ff; border:1px solid #1e5f7e; }
.badge-mode.auto  { background:#193d21; color:#66ff9f; border:1px solid #2c6b41; }
.badge-mode.turbo { background:#4a2d0f; color:#ffcf5a; border:1px solid #80571f; }
.badge-mode.sturbo{ background:#3d1455; color:#e39aff; border:1px solid #5a1f82; }
.badge-mode.on    { background:#123d1a; color:#6aff8d; border:1px solid #1d6c32; }
.badge-mode.off   { background:#3d1414; color:#ff8c8c; border:1px solid #6e1d1d; }
.steps-wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
}
.steps-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.-wd ul li {
  font-size: 12px;     /* kecilin dikit biar muat di mobile */
  word-break: break-word;
}
.btn-play {
  font-size: 14px;
  padding: 10px;
}
.-wd h4 {
  font-size: 14px;
  margin: 0 0 8px;
  color: #433b1e;
}
.-wd ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.-wd ul li {
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed #233a5a;
}
.-wd ul li:last-child {
  border-bottom: none;
}

.btn-play {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(90deg,#ffb300,#ff6f00);
  box-shadow: 0 4px 14px #0006;
  transition: .2s;
}
.btn-play:hover {
  opacity: .85;
}
/* ====== FIX MODAL DI MOBILE + TINDIH CTA ====== */
.modal{ z-index:200; }                 /* modal di atas floating CTA */
.sheet{ max-width:100vw; }             /* jangan lebih lebar dari layar */
.sheet .body{ overflow-x:hidden; }     /* cegah geser horizontal */

.steps-wrap{
  display:grid;
  grid-template-columns: 1fr 260px;    /* desktop */
  gap: 16px;
}
@media (max-width: 768px){
  .steps-wrap{ grid-template-columns: 1fr; gap: 12px; }
  .p-info{ order:-1; }                 /* info game pindah ke atas */
}

/* Baris pola: rapihin biar ga meledak di layar kecil */
.pola-line{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:10px;
  background:#ff0000; border:1px solid #1a3559; border-radius:12px; padding:10px 12px;
}
.pola-line strong{
  line-height:1.3;
  word-break:break-word;               /* label boleh kebungkus */
  min-width:0;                         /* biar 1fr bisa mengecil */
}
.combo{ display:flex; gap:6px; }
.combo .chk,.combo .x{
  width:28px; height:26px; font-size:12px; font-weight:800; border-radius:6px;
}

/*  WD & tombol di mobile */
.-wd{ background:linear-gradient(180deg, #ff0000, #000000); border:1px solid #1a3559; border-radius:12px; padding:10px 12px; }
.-wd h4{ margin:0 0 6px; font-size:14px; color:#ffffff; }
.-wd ul{ margin:0; padding:0; list-style:none; }
.-wd li{ font-size:12.5px; padding:6px 0; border-bottom:1px dashed #233a5a; }
.-wd li:last-child{ border-bottom:none; }
.btn-play{ display:block; text-align:center; font-weight:800; color:#fff; background:linear-gradient(90deg, #ff0000, #aba8a1); border-radius:12px; padding:12px; box-shadow:0 4px 14px #0006; }
@media (max-width:420px){
  .btn-play{ padding:10px; font-size:14px; }
}
/* ==== Bottom Dock (quick menu bawah) ==== */
:root{ --dock-h: 68px; }  /* tinggi bar */

@media (max-width: 900px){
  body{ padding-bottom: calc(var(--dock-h) + max(10px, env(safe-area-inset-bottom))); }
}

.bottom-dock{
  position: fixed; left:0; right:0; bottom:0;
  z-index:120;
  background:#0b1422;
  border-top:1px solid #263650;
  box-shadow: 0 -8px 28px rgba(0,0,0,.55);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-dock::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  /* garis glow kuning-hijau seperti contoh */
  background:linear-gradient(90deg,#d4ff4c,#ffd64d,#ffa54c);
  opacity:.75;
}
.bottom-dock .dock-row{
  max-width:540px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:4px; padding:8px 12px;
}
.bottom-dock .item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-transform:uppercase; font-weight:800; font-size:11px; line-height:1;
  color:#eaf2ff;
}
.bottom-dock .item img{
  width:28px; height:28px; object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
  transition: transform .12s ease;
}
.bottom-dock .item:active img{ transform:scale(.96); }

/* Sembunyikan di desktop */
@media (min-width:900px){ .bottom-dock{ display:none; } }

/* Geser Floating CTA agar tidak ketimpa dock */
.float-cta{
  bottom: calc(var(--dock-h) + max(12px, env(safe-area-inset-bottom)));
  z-index:130; /* sedikit di atas dock */
}
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:linear-gradient(180deg, #ff0000, #000000);
  border-top:1px solid #ffc800;
}
.dock-inner{
  max-width:1220px; margin:auto;
  padding:8px 12px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
}
.dock-item{
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:#cfe2ff; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px 4px; border-radius:10px;
}
.dock-item .ico{ width:22px; height:22px; fill:currentColor; }
.dock-item span{ font-size:12px; letter-spacing:.2px; }
.dock-item:hover, .dock-item:focus-visible{ color:#433b1e; outline:2px solid transparent; }
@media (max-width:420px){
  .dock-item span{ font-size:11px; }
}
/* ==== LOAD MORE (Muat 50 Game Lagi) ==== */
.load-more-wrap{
  margin: 18px 0 6px;
  display: flex;
  justify-content: center;
}

.btn-load-more{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 11px 26px;
  border-radius: 999px;

  background: linear-gradient(90deg, #ff0000, #ff0000);
  border: 1px solid #ffc800;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;

  box-shadow: 0 6px 18px rgba(0,0,0,.75);
  cursor: pointer;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    opacity .16s ease;
  white-space: nowrap;
}

/* icon panah kecil di ujung kanan */
.btn-load-more::after{
  content: "↓";
  font-size: 14px;
  margin-left: 6px;
  transform: translateY(1px);
  transition: transform .18s ease;
}

/* hover & active */
.btn-load-more:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.85);
  filter: brightness(1.05);
}

.btn-load-more:hover::after{
  transform: translateY(3px);
}

.btn-load-more:active{
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(0,0,0,.7);
}

/* state kalau nanti mau kamu disable dari JS */
.btn-load-more[disabled],
.btn-load-more.is-end{
  opacity: .4;
  cursor: default;
  box-shadow: none;
  filter: grayscale(.1);
}

/* mobile: lebar ikut layar, tapi tetap cakep */
@media (max-width: 560px){
  .btn-load-more{
    width: min(320px, 100%);
    font-size: 12px;
    padding: 10px 18px;
  }
}