:root{
  --gold:#ffd700; --gold-dark:#b38600; --accent-green:#0f0; --bg:#0b0b0b;
  --btn-sheen-speed: 2.6s;
  --blink-speed: 2.8s;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#fff;-webkit-font-smoothing:antialiased}
header{display:flex;justify-content:center;align-items:center;gap:12px;padding:18px 18px 14px;background:#121212;position:relative;z-index:20}
header .update{color:var(--gold);font-weight:900;animation:swapGoldWhite 5s linear infinite}
header .harian{color:#fff;font-weight:700;animation:swapGoldWhite 5s linear infinite reverse}
header img{height:56px}

/* swap color subtle between update/harian */
@keyframes swapGoldWhite{
  0%{filter:brightness(1)}
  50%{filter:brightness(1.05)}
  100%{filter:brightness(1)}
}

/* basic buttons with sheen */
button{
  cursor:pointer;
  border:none;
  border-radius:12px;
  padding:10px 16px;
  font-weight:800;
  text-transform:uppercase;
  color:#000;
  background:linear-gradient(145deg,#fff,var(--gold));
  box-shadow:0 6px 0 var(--gold-dark);
  transition:all .12s;
  position:relative;
  overflow:hidden
}
button:active{transform:translateY(2px);box-shadow:0 4px 0 var(--gold-dark)}

/* white sheen animation on buttons */
button::after{
  content:"";
  position:absolute; top:0; left:-120%; width:40%; height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  opacity:.9;
  animation:btnSheen var(--btn-sheen-speed) linear infinite;
  pointer-events:none;
}
@keyframes btnSheen{ 0%{left:-120%} 100%{left:220%} }

/* layout */
.login-container{text-align:center;margin:12px 0}
.main-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  max-width: 820px;
  margin: 12px auto 18px;
}
.main-buttons button {
  width: auto;      /* tidak full-width */
  padding: 10px 20px;
}


/* sections */
section{max-width:980px;margin:18px auto;padding:0 12px;display:none;text-align:center}

/* slider base */
.slider{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#171717;
  padding:8px;
  margin-bottom:18px
}
.slides{display:flex;transition:transform .36s ease;will-change:transform}
.slides img{width:100%;flex-shrink:0;border-radius:10px;display:block}

/* Tombol panah < > */
.nav-left,.nav-right{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  border:none;
  background:var(--gold);
  color:#000;
  border-radius:50%;
  width:42px;
  height:42px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 0 var(--gold-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:blinkSlow var(--blink-speed) linear infinite;
}
.nav-left{left:6px}
.nav-right{right:6px}

/* card & pattern */
.game-container{
  border-radius:12px;
  background:#1b1b1b;
  padding:8px;
  margin:12px auto;
  max-width:720px;
  text-align:center;
  position:relative;
  overflow:visible;
  border:2px solid rgba(0,0,0,0.6)
}
.card-inner{
  border-radius:10px;
  padding:10px;
  background:linear-gradient(180deg,#0f0f0f,#0b0b0b);
  position:relative;
  z-index:2
}
.game-title{
  color:var(--gold);
  font-weight:900;
  font-size:18px;
  text-align:center;
  margin-top:8px;
  animation:blinkSlow var(--blink-speed) linear infinite
}

/* frame-img — TANPA EFEK */
.frame-img{
  width:100%;
  max-width:420px;
  border-radius:12px;
  overflow:hidden;
  background:#0a0a0a;
  display:block;
  margin:0 auto;
  position:relative;
  padding:6px
}
.frame-img img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:8px;
}
.frame-img::before{content:none;}
.frame-img .img-sheen{display:none;}

/* pattern box — TANPA EFEK */
.pattern-box{
  width:100%;
  border-radius:10px;
  padding:6px;
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,0.08);
  margin-top:10px;
  position:relative;
  overflow:hidden;
}
.pattern-box::after{content:none;}

/* pattern-row layout */
.pattern-row{
  display:flex;
  align-items:center;
  padding:8px;
  border-radius:8px;
  margin:6px 0;
  background:rgba(0,0,0,0.35);
  font-weight:800;
  gap:8px;
  box-sizing:border-box
}
.pattern-row .labels{
  flex:0 0 84px;
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:center;
}

/* 🎱 Bola biliar kecil (centang & silang) - RAPAT */
.tick, .cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  margin: 0 1px; /* lebih rapat dari 2px */
  border: 1.2px solid #000;
  box-shadow:
    inset -1.5px -1.5px 3px rgba(0,0,0,0.7),
    inset 1.5px 1.5px 3px rgba(255,255,255,0.15),
    0 1px 3px rgba(0,0,0,0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tick:hover, .cross:hover { transform: scale(1.05); }

/* 🟢 bola hijau (centang) - lebih biliar */
.tick {
  background: radial-gradient(circle at 35% 35%, #00ff00 0%, #007700 80%);
  text-shadow: 0 0 2px #002a00;
}

/* 🔴 bola merah (silang) - lebih biliar */
.cross {
  background: radial-gradient(circle at 35% 35%, #ff0000 0%, #770000 80%);
  text-shadow: 0 0 2px #2a0000;
}


/* pattern text */
.pattern-row .pattern-text{
  flex:1 1 auto;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:800
}
.pattern-row .mode{
  flex:1 1 auto;
  text-align:center;
  color:#ddd;
  font-weight:800;
  white-space:nowrap
}
.pattern-row .dc-pill,.pattern-row .status-pill,.pattern-row .turbo-pill{
  flex:0 0 auto;
  margin-left:auto; /* selalu rata kanan */
}

/* ⚙️ DC & Turbo pills */
.dc-pill, .turbo-pill{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:68px;
  height:42px;
  font-size:12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.25);
  box-shadow:0 4px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  flex-shrink:0;
  margin-left:auto;
}
.dc-on, .turbo-on{
  background:linear-gradient(180deg,#bfffcf,#6eff90);
  color:#000;
  border:1px solid rgba(0,155,0,0.15)
}
.dc-off, .turbo-off{
  background:linear-gradient(180deg,#ffb3b3,#ff6f6f);
  color:#000;
  border:1px solid rgba(255,0,0,0.15)
}
.pill-top{font-size:11px;font-weight:900;line-height:1;text-transform:uppercase}
.pill-bottom{font-size:13px;font-weight:900;line-height:1;margin-top:2px;text-transform:uppercase}

/* Bett & RTP */
.bett{
  width:100%;
  padding:8px;
  border-radius:10px;
  background:#0b0b0b;
  font-weight:900;
  color:var(--gold);
  text-align:center;
  margin-top:8px;
  position:relative;
  overflow:visible;
  border:1px solid rgba(255,255,255,0.08)
}
.rtp-wrap{width:100%;margin-top:8px;position:relative}
.rtp-bar{
  height:20px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  background:#060606;
  position:relative
}
.rtp-fill{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  font-weight:900;
  color:black;
  background:linear-gradient(90deg,#00ff88,#00cc44);
  transition:width .8s ease
}

/* loading overlay */
#loadingOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);z-index:9999;flex-direction:column;color:#fff}
#loadingBox{width:420px;max-width:90%;padding:18px;border-radius:12px;border:2px solid rgba(255,215,0,0.9);background:linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.85));display:flex;flex-direction:column;gap:12px;align-items:center}
#loadingText{font-weight:900;color:var(--gold)}
#loadingBar{width:100%;height:14px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:#111;overflow:hidden}
#loadingFill{height:100%;width:0;background:linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,215,0,0.9));transition:width .05s linear}

/* footer */
footer{padding:16px;text-align:center;background:#0f0f0f;color:#bbb;font-size:13px;margin-top:18px}

/* responsive */
@media(max-width:640px){
  .frame-img{max-width:320px}
  header img{height:44px}
  .main-buttons{max-width:420px}
  .nav-left,.nav-right{width:34px;height:34px;font-size:16px}
  .nav-left{left:4px}
  .nav-right{right:4px}
  .pattern-row .labels{flex:0 0 64px}
  .tick, .cross {width:18px;height:18px;font-size:11px}
  .dc-pill{width:60px;height:38px}
}


/* ✨ Efek kelap-kelip lebih terlihat */
@keyframes blinkArrow {
  0% {
    opacity: 0.4;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 25px rgba(255, 255, 150, 1), 0 0 50px rgba(255, 215, 0, 1);
  }
  100% {
    opacity: 0.5;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  }
}

/* small fade-in */
.fade-in{opacity:0;transform:translateY(10px);animation:fadeIn .36s forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}
@keyframes blinkSlow{
  0%,49%{opacity:1;filter:brightness(1)}
  50%{opacity:.7;filter:brightness(.95)}
  100%{opacity:1;filter:brightness(1)}
}
/* === PANDUAN PENGGUNA === */
#panduanOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideDown 0.7s ease-out;
}

.panduan-box {
  position: relative;
  text-align: center;
  animation: fadeIn 0.8s ease-out;
}

.panduan-img {
  width: 98%;
  max-width: 520px; /* 🔹 lebih besar */
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(255,215,0,0.6);
  animation: slideDown 0.6s ease-out;
}

/* 🔹 Tombol kecil kanan bawah gambar */
#okPahamBtn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 14px;
  font-weight: 900;
  font-size: 13px;
  background: linear-gradient(145deg, var(--gold), var(--gold-dark));
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255,215,0,0.6);
  transition: transform 0.15s ease;
}

#okPahamBtn:active {
  transform: scale(0.94);
}

/* 🔹 Tanda panah kecil di bawah gambar */
.arrow-indicator {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold);
  animation: bounce 1.2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -8px); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}
#tombolBukti {
  position: fixed;
  bottom: 40px;           /* Turunkan lebih ke bawah */
  left: 50%;               
  transform: translateX(-50%); 
  background-color: #fff;  
  color: #000;             
  border: 1px solid #333;
  padding: 4px 10px;       
  font-size: 12px;         
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  z-index: 9999;           
  animation: getar 0.5s infinite;
}

@keyframes getar {
  0% { transform: translateX(-50%) translateY(0); }
  25% { transform: translateX(-50%) translateY(-2px); }
  50% { transform: translateX(-50%) translateY(2px); }
  75% { transform: translateX(-50%) translateY(-2px); }
  100% { transform: translateX(-50%) translateY(0); }
}


@keyframes goldGlow {
  0%   { opacity: 0.85; filter: brightness(1); }
  50%  { opacity: 1; filter: brightness(1.3); }
  100% { opacity: 0.85; filter: brightness(1); }
}

/* === 💚 RTP BAR HIJAU MENYALA === */
.rtp-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-weight: 900;
  color: #000;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    #00ff99,
    #00ff55,
    #00ff99,
    #00ff55
  );
  background-size: 300% 100%;
  animation: rtpShine 3s linear infinite;
  box-shadow:
    0 0 10px #00ff88,
    0 0 20px rgba(0, 255, 100, 0.8),
    inset 0 0 10px rgba(0, 255, 100, 0.6);
  transition: width 0.8s ease;
}

@keyframes rtpShine {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* ===== Variabel warna dinamis ===== */
:root {
  --border-color: #ffd700; /* default emas */
  --shadow-color: rgba(255, 215, 0, 0.3);
  --shadow-inset-color: rgba(255, 215, 0, 0.15);
}

/* ✨ Garis emas tipis di bingkai gambar */
.game-container img {
  border: 2px solid var(--border-color);
  border-radius: 10px;
  box-shadow:
    0 0 6px var(--shadow-color),
    inset 0 0 4px var(--shadow-inset-color);
}

/* ✨ Garis tipis di kotak POLA, BET, RTP */
.pola-box,
.bet-box,
.rtp-box {
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  box-shadow:
    0 0 6px var(--shadow-color),
    inset 0 0 3px var(--shadow-inset-color);
}

/* 🔹 Garis tipis elegan di frame, pola, dan bett */
.frame-img,
.pattern-box,
.bett {
  border: 1.5px solid var(--border-color);
  box-shadow:
    0 0 6px var(--shadow-color),
    inset 0 0 4px var(--shadow-inset-color);
}

/* ✨ Garis emas seragam di semua bingkai dan kotak */
.frame-img,
.pattern-box,
.bett,
.rtp-bar {
  border: 1.5px solid var(--border-color);
  box-shadow:
    0 0 6px var(--shadow-color),
    inset 0 0 4px var(--shadow-inset-color);
  border-radius: 10px;
}

/* ✨ Garis luar card tipis elegan */
.game-container {
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 0 6px var(--shadow-color);
  background: #111;
}

/* Container bola biliar super rapat */
.pattern-row .labels {
  display: flex;
  flex-wrap: nowrap; /* jangan bungkus */
  gap: 0;            /* hilangkan jarak */
}

/* ===== Bola biliar super semput + geser sedikit ke kiri ===== */
.pattern-row .labels {
  display: flex;
  flex-wrap: nowrap; /* jangan bungkus */
  gap: 0;            /* hilangkan jarak antar bola */
  justify-content: flex-start; /* nempel ke kiri */
  margin-left: -3px; /* geser semua bola 3px ke kiri */
}

/* Bola biliar */
.tick, .cross {
  width: 20px;
  height: 20px;
  margin: 0;         /* pastikan nol */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  border: 1px solid #000;
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,0.7),
    inset 1px 1px 2px rgba(255,255,255,0.15),
    0 1px 2px rgba(0,0,0,0.5);
  transition: transform 0.15s ease;
}

.tick {
  background: radial-gradient(circle at 35% 35%, #00ff00 0%, #007700 80%);
  text-shadow: 0 0 2px #002a00;
}

.cross {
  background: radial-gradient(circle at 35% 35%, #ff0000 0%, #770000 80%);
  text-shadow: 0 0 2px #2a0000;
}

/* 🔹 Kecilkan teks pola & mode di Pragmatic & PG — paksa */
.pattern-row .pattern-text,
.pattern-row .mode {
  font-size: 12px !important;   /* paksa kecil */
  line-height: 1.2 !important;  /* rapatkan antarbaris */
  padding: 0 2px !important;    /* sedikit padding biar tidak nempel bola */
  text-align: center !important; 
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 🔹 Perbaiki kualitas gambar game - tajam & jernih */
.frame-img img {
  width: 100%;                  /* sesuaikan lebar container */
  height: auto;                 /* tetap proporsional */
  object-fit: cover;            /* agar tetap proporsional & cover frame */
  border-radius: 8px;           /* sudut halus */
  image-rendering: auto;        /* default smooth */
  filter: contrast(1.1) brightness(1.05) saturate(1.1); /* tajam & warna hidup */
  display: block;               /* hilangkan gap bawah */
}

/* 🔹 Sheen tipis diagonal full di dalam gambar */
.frame-img {
  position: relative;
  overflow: hidden;  /* pastikan garis tidak keluar frame */
  border-radius: 10px;
}


@keyframes diagonalSheen {
  0% { transform: translate(-100%, 100%) rotate(-25deg); }
  100% { transform: translate(100%, -100%) rotate(-25deg); }
}

/* === 3 blok kecil di dalam 1 kotak pola === */
/* Setiap .pattern-row jadi kotak emas kecil sendiri */
.pattern-row {
  border: 2px solid #ffd700;                /* garis emas keliling */
  border-radius: 10px;                      /* pojok membulat */
  padding: 10px;
  margin: 10px 0;                           /* jarak antar blok */
  background: linear-gradient(180deg, #0b0b0b, #141414); /* biar kontras */
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); /* efek glow emas halus */
}

.frame-img {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* Garis pertama — kiri bawah ke kanan atas */
.frame-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0) 60%
  );
  animation: sheen1 3s linear infinite;
  pointer-events: none;
}

/* Garis kedua — kanan bawah ke kiri atas */
.frame-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -45deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0) 60%
  );
  animation: sheen2 3s linear infinite;
  pointer-events: none;
}

@keyframes sheen1 {
  0% { transform: translate(-100%, 100%); }
  100% { transform: translate(100%, -100%); }
}

@keyframes sheen2 {
  0% { transform: translate(100%, 100%); }
  100% { transform: translate(-100%, -100%); }
}