

<style>

:root{
  --bg:#0b0f1a;
  --card:#12172a;
  --border:rgba(255,255,255,.08);
  --text:#e9eefc;
  --muted:#9aa4c7;
  --primary:var(--primary);
}

/* ================= HOME ================= */
.home{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
}

.home-title{
  margin:0 0 16px;
  font-size:22px;
  font-weight:800;
  color:var(--primary);
}

.home-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
}

/* BIG CARD */
.home-main{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
}
.home-main img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-main-text{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
}
.home-main-text h3{
  margin:0;
  font-size:20px;
}
.home-main-text p{
  margin:4px 0 0;
  color:var(--muted);
}

/* SIDE CARDS */
.home-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home-card{
  display:flex;
  gap:12px;
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:10px;
  cursor:pointer;
  align-items:center;
}
.home-card img{
  width:80px;
  height:60px;
  object-fit:cover;
  border-radius:10px;
}
.home-card strong{
  display:block;
}
.home-card span{
  font-size:13px;
  color:var(--muted);
}

/* ================= MOBILE HOME ================= */
@media(max-width:768px){
  .home-grid{
    grid-template-columns:1fr;
  }
  .home-main{
    height:200px;
  }
  .home-card img{
    width:70px;
    height:50px;
  }
}
.slot-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  background:#0f1425;
  border-top:1px solid rgba(255,255,255,.08);
}

/* tombol NEXT */
.btn-next{
  background:var(--primary);
  color:#000;
  border:none;
  padding:8px 16px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
}

/* kategori */
.slot-category{
  display:flex;
  gap:6px;
}
.slot-category button{
  background:#1a2138;
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
}

/* MOBILE: tombol rapi & gak nutup */
@media(max-width:768px){
  .slot-controls{
    flex-wrap:wrap;
    gap:8px;
  }
  .slot-category{
    width:100%;
    justify-content:space-between;
  }
}

/* SLOT CONTROLS DI BAWAH PLAYER */
.slot-controls-bottom{
  background:#0f1425;
  border-top:1px solid rgba(255,255,255,.08);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* PREV / NEXT */
.slot-nav{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.slot-nav button{
  flex:1;
  background:var(--primary);
  border:none;
  padding:10px 0;
  border-radius:10px;
  font-weight:700;
  color:#000;
  cursor:pointer;
}

/* CATEGORY */
.slot-category{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.slot-category button{
  flex:1;
  background:#1a2138;
  color:#fff;
  border:none;
  padding:8px 0;
  border-radius:20px;
  font-size:13px;
  cursor:pointer;
}

/* ACTIVE STATE (OPSIONAL) */
.slot-category button.active{
  background:var(--primary);
  color:#000;
}

/* MOBILE */
@media(max-width:768px){
  .slot-controls-bottom{
    padding:8px;
  }
  .slot-nav button{
    padding:9px 0;
  }
}
.slot-info{
  margin-top:10px;
  padding:10px 12px;
  background:#0f1425;
  border-radius:12px;
  text-align:center;
}
.slot-title{
  font-weight:700;
  font-size:14px;
  margin-bottom:6px;
}
.slot-meta{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--primary);
}


/* BADGE WIN HOME */
.player{
  position: relative; /* WAJIB */
}

.win-badge{
  position:absolute;
  top:12px;
  right:12px;

  z-index:50;              /* ⬅️ NAIKKAN */
  pointer-events:none;

  background:linear-gradient(135deg,var(--primary),#ff8c00);
  color:#000;
  font-size:13px;
  font-weight:800;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
  white-space:nowrap;
}

/* JACKPOT MODE */
.win-badge.jackpot{
  background:linear-gradient(135deg,#6affff,#1dd3ff);
  color:#002;
}


@media(max-width:768px){
    
    .win-badge{
    top:8px;
    right:8px;
    font-size:12px;
    padding:5px 10px;
  }


  /* MATIKAN SCROLL BODY SAAT CHAT AKTIF */
  body{
    overflow-x:hidden;
  }

  /* CHAT MOBILE GLOBAL */
  .chat-mobile{
    position:relative;
    display:flex;
    flex-direction:column;

    height:60vh;              /* ⬅️ KUNCI TINGGI */
    max-height:60vh;

    margin:16px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;

    overflow:hidden;          /* ⬅️ PENTING */
  }

  /* HEADER TIDAK IKUT SCROLL */
  .chat-mobile .chat-header{
    flex-shrink:0;
  }

  /* AREA CHAT = SCROLLABLE */
  .chat-mobile .chat-messages{
    flex:1;
    overflow-y:auto;          /* ⬅️ SCROLL AKTIF */
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* INPUT TETAP DI BAWAH */
  .chat-mobile .chat-input{
    flex-shrink:0;
    background:var(--card);
    border-top:1px solid var(--border);
  }
}

</style>