/* =============================================
   RTP LIVE SLOT — STYLESHEET
   ============================================= */

:root{
  /* =============================================
     🎨 WARNA — UBAH DI SINI SESUAI KEINGINAN
     ============================================= */

  /* WARNA AKSEN UTAMA */
  --gold:#E8A87C;       /* Coklat hangat / RTP tinggi         */
  --gold2:#C0622A;      /* Coklat tua / gradient              */
  --neon:#E07050;       /* Merah bata / border aktif          */
  --red:#CC3300;        /* Merah gelap / badge live           */
  --green:#D4845A;      /* Coklat oranye / RTP sangat tinggi  */

  /* BACKGROUND UTAMA HALAMAN */
  --bg-page:#1A0A08;    /* Coklat sangat gelap                */

  /* HEADER */
  --bg-header:rgba(95, 21, 21, 0.98);
  --border-header:rgba(180,80,40,.2);

  /* BANNER */
  --bg-banner:#1A0A08;

  /* PROVIDER SECTION */
  --bg-provider-card:rgba(180,80,40,.07);
  --border-provider:rgba(180,80,40,.2);
  --border-provider-hover:rgba(220,100,50,.7);
  --bg-provider-hover:rgba(180,80,40,.15);

  /* REKOMENDASI KEMENANGAN */
  --bg-winrec:#1A0A08;
  --bg-winrec-box1:rgba(180,80,30,.1);
  --bg-winrec-box2:rgba(140,50,20,.06);
  --border-winrec:rgba(180,80,40,.28);
  --bg-winrec-card:rgba(160,60,30,.08);
  --border-winrec-card:rgba(180,80,40,.2);

  /* GAME CARD */
  --bg-card:rgba(180,80,40,.06);
  --border-card:rgba(180,80,40,.18);
  --border-card-hover:rgba(220,100,50,.45);

  /* MODAL POPUP */
  --bg-modal1:#1F0C08;
  --bg-modal2:#2A1208;
  --border-modal:rgba(200,90,50,.25);

  /* MISC */
  --r:12px;
}

/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background-color:var(--bg-page);
  background-image:url('img/assets/background-desktop.png');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:#fff;
  font-family:'Rajdhani',sans-serif,system-ui;
  overflow-x:hidden;
}
/* Mobile: pakai gambar portrait */
@media(max-width:768px){
  body{
    background-image:url('img/assets/background-mobile.png');
    background-attachment:scroll;
  }
}
body::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);pointer-events:none;z-index:0}

/* ===== HEADER ===== */
header{position:sticky;top:0;z-index:100;background:var(--bg-header);border-bottom:1px solid var(--border-header);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:36px;width:auto;object-fit:contain}
.live-badge{display:flex;align-items:center;gap:6px;background:rgba(180,40,10,.2);border:1px solid rgba(200,60,20,.5);border-radius:20px;padding:5px 12px;font-size:.74rem;font-weight:700;letter-spacing:1px;color:#E07050;white-space:nowrap}
.live-dot{width:7px;height:7px;background:#CC3300;border-radius:50%;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.clock{font-size:.7rem;color:rgba(255,200,160,.35);font-family:'Orbitron',monospace;white-space:nowrap}

/* ===== BANNER ===== */
.hero{
  position:relative;
  z-index:1;
  padding:10px 12px;
}
.hero-frame{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:2px solid transparent;
  background-clip:padding-box;
  box-shadow:
    0 0 0 2px rgba(212,175,55,.6),
    0 0 16px rgba(212,175,55,.35),
    0 0 40px rgba(212,175,55,.15),
    inset 0 0 20px rgba(0,0,0,.2);
  animation:bannerGlow 3s ease-in-out infinite alternate;
  /* Pastikan banner tidak mengecil */
  width:100%;
  line-height:0;
}
.hero-frame img{
  width:100%;
  height:auto;
  min-height:120px;
  display:block;
  object-fit:cover;
}
@keyframes bannerGlow{
  from{box-shadow:0 0 0 2px rgba(212,175,55,.5),0 0 16px rgba(212,175,55,.25),0 0 40px rgba(212,175,55,.1)}
  to  {box-shadow:0 0 0 2px rgba(255,215,80,.9),0 0 24px rgba(255,215,80,.5),0 0 60px rgba(255,215,80,.2)}
}
.hero-frame::before,.hero-frame::after{
  content:'';
  position:absolute;
  width:28px;height:28px;
  z-index:2;pointer-events:none;
}
.hero-frame::before{top:6px;left:6px;border-top:3px solid #FFD700;border-left:3px solid #FFD700;border-radius:6px 0 0 0}
.hero-frame::after{top:6px;right:6px;border-top:3px solid #FFD700;border-right:3px solid #FFD700;border-radius:0 6px 0 0}
.hero-corner-bl,.hero-corner-br{position:absolute;width:28px;height:28px;z-index:2;pointer-events:none}
.hero-corner-bl{bottom:6px;left:6px;border-bottom:3px solid #FFD700;border-left:3px solid #FFD700;border-radius:0 0 0 6px}
.hero-corner-br{bottom:6px;right:6px;border-bottom:3px solid #FFD700;border-right:3px solid #FFD700;border-radius:0 0 6px 0}

@media(max-width:480px){
  .hero{padding:8px 8px}
  .hero-frame{border-radius:12px}
  .hero-frame img{min-height:80px}
}

/* ===== BANNER BUTTONS ===== */
.banner-btns{
  position:relative;z-index:1;
  display:flex;gap:10px;
  padding:12px 12px;
  justify-content:center;
  flex-wrap:wrap;
}
.bbtn{
  display:flex;align-items:center;gap:7px;
  padding:10px 20px;
  border-radius:50px;
  font-family:'Orbitron',monospace;
  font-size:.72rem;font-weight:700;
  letter-spacing:.8px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s,box-shadow .18s,opacity .18s;
  white-space:nowrap;
}
.bbtn svg{width:16px;height:16px;flex-shrink:0}
.bbtn:hover{transform:translateY(-2px);opacity:.9}
.bbtn:active{transform:translateY(0)}

/* APK — biru */
.bbtn-apk{
  background:linear-gradient(135deg,#1565C0,#1E88E5);
  color:#fff;
  box-shadow:0 4px 14px rgba(30,136,229,.45);
}
.bbtn-apk:hover{box-shadow:0 6px 20px rgba(30,136,229,.65)}

/* Daftar — emas */
.bbtn-daftar{
  background:linear-gradient(135deg,#C0622A,#E8A87C);
  color:#fff;
  box-shadow:0 4px 14px rgba(192,98,42,.45);
}
.bbtn-daftar:hover{box-shadow:0 6px 20px rgba(232,168,124,.65)}

/* Login — hijau */
.bbtn-login{
  background:linear-gradient(135deg,#1B5E20,#43A047);
  color:#fff;
  box-shadow:0 4px 14px rgba(67,160,71,.45);
}
.bbtn-login:hover{box-shadow:0 6px 20px rgba(67,160,71,.65)}

@media(max-width:480px){
  .bbtn{padding:9px 14px;font-size:.65rem;gap:5px}
  .bbtn svg{width:14px;height:14px}
}

/* ===== MAIN ===== */
.main{position:relative;z-index:1;padding:16px 12px;max-width:1280px;margin:0 auto}
.stitle{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.stitle h2{font-family:'Orbitron',monospace;font-size:.88rem;font-weight:700;letter-spacing:2px;white-space:nowrap}
.sline{flex:1;height:1px;background:linear-gradient(90deg,var(--border-card),transparent)}

/* ===== PROVIDER ===== */
/*
   Provider tetap memakai struktur/urutan HTML yang sudah ada.
   Perubahan di bawah hanya merapikan viewport agar card tidak terlihat kepotong.
   Jumlah card utuh yang tampil: mobile 3, tablet 5, desktop 7, layar besar 9.
*/
.pv-outer{
  --pv-gap:10px;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
  margin-bottom:22px;
}

.pv-arr{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(145deg,#E89255 0%,#C0622A 58%,#8E3218 100%);
  border:1px solid rgba(255,225,195,.42);
  color:#fff;
  font-size:1.05rem;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  box-shadow:
    0 5px 14px rgba(0,0,0,.34),
    0 0 0 2px rgba(232,168,124,.10),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.pv-arr:hover{
  transform:translateY(-1px) scale(1.06);
  filter:brightness(1.08);
  box-shadow:
    0 7px 18px rgba(0,0,0,.42),
    0 0 16px rgba(232,168,124,.30),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.pv-arr:active{transform:scale(.95)}

/* Viewport provider */
.pv-wrap{
  flex:1 1 auto;
  min-width:0;
  position:relative;
  overflow:hidden;
  container-type:inline-size;
  padding:6px 0 10px;
}

/* Gradient lama membuat card sisi kiri/kanan tampak seperti terpotong. */
.pv-wrap::before,
.pv-wrap::after{display:none}

.pv-track{
  /* Default desktop/tablet-landscape: tepat 7 card utuh. */
  --pv-card-w:calc((100cqw - 60px) / 7);
  --pv-half-step:calc((var(--pv-card-w) + var(--pv-gap)) / 2);
  display:flex;
  align-items:center;
  gap:var(--pv-gap);
  position:relative;
  left:50%;
  width:max-content;
  transform:translateX(calc(-50% + var(--pv-half-step)));
  will-change:transform;
}

/* Homepage tetap dapat discroll seperti CSS awal. */
.pv-home .pv-wrap{
  overflow-x:auto;
  padding-bottom:7px;
  scrollbar-width:thin;
  scrollbar-color:var(--gold2) transparent;
}
.pv-home .pv-wrap::-webkit-scrollbar{height:5px}
.pv-home .pv-wrap::-webkit-scrollbar-thumb{background:var(--gold2);border-radius:5px}
.pv-home .pv-track{position:static;left:auto;transform:none}

/* Card provider */
.pv-card{
  position:relative;
  flex:0 0 var(--pv-card-w);
  width:var(--pv-card-w);
  min-width:0;
  height:94px;
  padding:9px 7px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:16px;
  background:linear-gradient(155deg,#fff 0%,#f8f4ef 56%,#eee6df 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  text-decoration:none;
  overflow:hidden;
  box-shadow:
    0 6px 15px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition:
    border-color .2s ease,
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.pv-card:hover{
  border-color:rgba(224,112,80,.78);
  transform:translateY(-2px);
  background:#fff;
  box-shadow:
    0 8px 18px rgba(0,0,0,.34),
    0 0 13px rgba(224,112,80,.17),
    inset 0 1px 0 #fff;
}

/* Provider yang sedang dibuka: class .active dari HTML tetap dipakai. */
.pv-card.active{
  border:2px solid #E07050;
  background:linear-gradient(155deg,#fff 0%,#fff9f4 58%,#f7e6da 100%);
  transform:translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(224,112,80,.18),
    0 0 17px rgba(224,112,80,.30),
    0 8px 19px rgba(0,0,0,.34),
    inset 0 1px 0 #fff;
}

.pv-card.active::after{
  content:'';
  position:absolute;
  left:25%;
  right:25%;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#E8A87C,#E07050,#E8A87C);
}

.pv-card.active .pv-name{
  color:#A44224;
  font-weight:800;
}
.pv-card:focus-visible{outline:3px solid rgba(232,168,124,.75);outline-offset:3px}

/* Logo */
.pv-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:44px;
  min-height:44px;
}
.pv-card img{
  display:block;
  width:82%;
  max-width:88px;
  height:44px;
  object-fit:contain;
  transition:opacity .2s ease,transform .2s ease;
}
.pv-card:hover img{opacity:1;transform:scale(1.02)}

.pv-name{
  display:block;
  width:100%;
  max-width:100%;
  padding:0 2px;
  font-family:'Rajdhani',sans-serif;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.35px;
  line-height:1.15;
  color:#3b3531;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile: tepat 3 provider utuh */
@media(max-width:480px){
  .pv-outer{
    --pv-gap:8px;
    gap:7px;
  }
  .pv-arr{
    flex-basis:32px;
    width:32px;
    height:32px;
    font-size:.82rem;
  }
  .pv-wrap{padding:5px 0 8px}
  .pv-track{
    --pv-card-w:calc((100cqw - 16px) / 3);
  }
  .pv-card{
    height:76px;
    padding:7px 5px;
    border-radius:12px;
    gap:3px;
  }
  .pv-logo-wrap{height:36px;min-height:36px}
  .pv-card img{
    width:76%;
    max-width:64px;
    height:34px;
  }
  .pv-name{font-size:.56rem;letter-spacing:.2px}
  .pv-card.active{transform:translateY(-1px)}
}

/* Tablet portrait: tepat 5 provider utuh */
@media(min-width:481px) and (max-width:768px){
  .pv-outer{
    --pv-gap:9px;
    gap:9px;
  }
  .pv-arr{
    flex-basis:36px;
    width:36px;
    height:36px;
    font-size:.9rem;
  }
  .pv-track{
    --pv-card-w:calc((100cqw - 36px) / 5);
  }
  .pv-card{
    height:84px;
    border-radius:14px;
  }
  .pv-logo-wrap{height:39px;min-height:39px}
  .pv-card img{max-width:72px;height:38px}
  .pv-name{font-size:.59rem}
}

/* Layar besar: tepat 9 provider utuh */
@media(min-width:1200px){
  .pv-track{
    --pv-card-w:calc((100cqw - 80px) / 9);
  }
  .pv-card{height:96px;border-radius:17px}
}

/* ===== WIN REC ===== */
.win-box{background:linear-gradient(135deg,var(--bg-winrec-box1),var(--bg-winrec-box2),var(--bg-winrec-box1));border:1px solid var(--border-winrec);border-radius:14px;padding:14px 16px;margin-bottom:22px}
.win-ttl{font-family:'Orbitron',monospace;font-size:.76rem;font-weight:700;letter-spacing:2px;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.win-ttl::before{content:'';width:8px;height:8px;background:var(--gold);border-radius:50%;animation:pulse 1.2s infinite;flex-shrink:0}
.win-mask{overflow:hidden;position:relative}
.win-mask::before,.win-mask::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
.win-mask::before{left:0;background:linear-gradient(90deg,var(--bg-page),transparent)}
.win-mask::after{right:0;background:linear-gradient(-90deg,var(--bg-page),transparent)}
.win-track{display:flex;gap:12px;animation:wscroll 30s linear infinite;width:max-content;will-change:transform}
.win-track:hover{animation-play-state:paused}
@keyframes wscroll{to{transform:translateX(-50%)}}

/* Card lebih besar, layout vertikal agar tidak kejepit */
.win-card{
  flex-shrink:0;
  width:150px;
  background:var(--bg-header);
  border:1px solid rgba(180,80,40,.3);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.win-card:hover{background:rgba(40,15,8,.98);border-color:rgba(220,100,50,.6);transform:translateY(-2px)}
.wimg{display:block;width:100%;height:80px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.04);flex-shrink:0}
.wimg img{width:100%;height:100%;object-fit:cover;display:block}
.wi{display:block;width:100%;min-width:0}
.wi-game{display:block;font-size:.78rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.wi-prov{display:block;font-size:.62rem;color:rgba(255,255,255,.35);margin-bottom:4px}
.wr{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%}
.wr-rtp{font-family:'Orbitron',monospace;font-size:1rem;font-weight:900;color:var(--gold);line-height:1;white-space:nowrap}
.ws{font-size:.58rem;padding:2px 8px;border-radius:8px;font-weight:700;white-space:nowrap}
.shot{background:rgba(255,51,102,.18);color:var(--red);border:1px solid rgba(255,51,102,.28)}
.swin{background:rgba(0,255,136,.12);color:var(--green);border:1px solid rgba(0,255,136,.26)}
.snew{background:rgba(0,191,255,.12);color:#00BFFF;border:1px solid rgba(0,191,255,.26)}

/* Tombol Login & Daftar di win-card */
.wc-btns{display:flex;gap:6px;width:100%;margin-top:2px}
.wc-btn{flex:1;padding:5px 0;border-radius:7px;font-family:'Orbitron',monospace;font-size:.55rem;font-weight:700;letter-spacing:.8px;text-align:center;text-decoration:none;cursor:pointer;transition:opacity .2s,transform .15s}
.wc-btn:hover{opacity:.85;transform:translateY(-1px)}
.wc-daftar{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#000}
.wc-login{background:rgba(224,112,80,.12);border:1px solid rgba(224,112,80,.4);color:var(--neon)}
.win-select{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.win-select:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.wc-warning{width:100%;border:1px solid rgba(255,120,80,.55);background:rgba(150,35,18,.25);color:#ff9b78}

/* ===== FILTER ===== */
.fbar{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.fbar::-webkit-scrollbar{display:none}
.fbtn{flex-shrink:0;padding:6px 18px;border-radius:20px;border:1px solid var(--border-card);background:transparent;color:rgba(255,255,255,.42);font-family:'Rajdhani',sans-serif;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fbtn.active{background:rgba(180,80,40,.15);border-color:rgba(220,100,50,.55);color:var(--neon)}

/* ===== GAME GRID ===== */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px;margin-bottom:24px;contain:layout}
.gc{width:100%;padding:0;background:var(--bg-header);border:1px solid rgba(180,80,40,.3);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;contain:layout style;box-shadow:0 2px 8px rgba(0,0,0,.3);color:inherit;font:inherit;text-align:left}
.gc:hover{border-color:rgba(220,100,50,.6);transform:translateY(-3px);box-shadow:0 8px 20px rgba(180,80,40,.2)}
.gc:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.gc-low{border-color:rgba(255,90,65,.48)}
.gthumb{display:block;width:100%;aspect-ratio:4/3;background:rgba(255,255,255,.03);overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.gc:hover .gthumb img{transform:scale(1.05)}
.gbody{display:block;padding:9px 11px}
.gname{display:block;font-size:.73rem;font-weight:700;color:#fff;margin-bottom:5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grtp{display:block;font-family:'Orbitron',monospace;font-size:1.1rem;font-weight:900;line-height:1;margin-bottom:3px}
.gprov{display:block;font-size:.6rem;color:rgba(255,255,255,.28);margin-bottom:6px}
.rbar{display:block;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.rfill{display:block;height:100%;border-radius:2px}
.rh{color:var(--green)}.rm{color:var(--gold)}.rl{color:rgba(255,255,255,.4)}
.rfill.rh{background:linear-gradient(90deg,var(--green),var(--neon))}
.rfill.rm{background:linear-gradient(90deg,var(--gold2),var(--gold))}
.rfill.rl{background:rgba(255,255,255,.16)}
.gstatus{display:inline-block;margin-top:7px;padding:3px 8px;border:1px solid rgba(255,120,80,.45);border-radius:10px;background:rgba(150,35,18,.25);color:#ff9b78;font-size:.56rem;font-weight:700;letter-spacing:.7px}
.static-rtp-note{margin:-5px 0 13px;color:rgba(255,255,255,.55);font-size:.72rem;line-height:1.4}

/* ===== FOOTER ===== */
footer{text-align:center;padding:16px;border-top:1px solid var(--border-card);color:rgba(255,255,255,.2);font-size:.68rem}

/* ===== MODAL ===== */
.mOv{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:999;align-items:center;justify-content:center;padding:16px}
.mOv.show{display:flex}
.modal{background:linear-gradient(145deg,var(--bg-modal1),var(--bg-modal2));border:1px solid var(--border-modal);border-radius:18px;padding:26px 22px;width:100%;max-width:360px;position:relative;animation:mIn .28s cubic-bezier(.23,1,.32,1)}
@keyframes mIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mcl{position:absolute;top:13px;right:15px;background:none;border:none;color:rgba(255,255,255,.38);font-size:1.3rem;cursor:pointer;line-height:1;transition:color .2s}
.mcl:hover{color:#fff}
.mgi{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.mgi-img{width:72px;height:72px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.mgi-img img{width:100%;height:100%;object-fit:cover;display:block}
.mgn{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.3}
.mgr{font-family:'Orbitron',monospace;font-size:1.05rem;font-weight:900;color:var(--green)}
.mttl{font-family:'Orbitron',monospace;font-size:.75rem;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,.4);text-align:center;margin-bottom:14px}
.mbtns{display:flex;flex-direction:column;gap:10px}
.mbtn{display:block;width:100%;padding:13px;border-radius:12px;font-family:'Orbitron',monospace;font-size:.8rem;font-weight:700;letter-spacing:1px;text-align:center;text-decoration:none;cursor:pointer;border:none;transition:opacity .2s,box-shadow .2s}
.mbtn-l{background:rgba(0,255,204,.1);border:1px solid rgba(0,255,204,.4);color:var(--neon)}
.mbtn-l:hover{background:rgba(0,255,204,.18)}
.mbtn-d{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#000;font-weight:900}
.mbtn-d:hover{opacity:.88;box-shadow:0 5px 16px rgba(255,215,0,.28)}
.mnote{text-align:center;font-size:.6rem;color:rgba(255,255,255,.2);margin-top:11px}
.rtp-actions-hidden{display:none!important}
.rtp-warning{
  margin-bottom:4px;
  padding:15px 14px;
  border:1px solid rgba(255,120,80,.55);
  border-radius:12px;
  background:rgba(150,35,18,.2);
  color:rgba(255,255,255,.86);
  font-size:.82rem;
  line-height:1.45;
  text-align:left;
}
.rtp-warning[hidden]{display:none}
.rtp-warning p+p{margin-top:7px}
.rtp-warning-title{color:#ff9b78;font-weight:700}
.modal.rtp-low .mgr{color:#ff795f}
.game-popovers{display:contents}
.game-popover{
  display:none;
  position:fixed;
  inset:0;
  width:min(360px,calc(100vw - 32px));
  height:max-content;
  max-height:calc(100vh - 32px);
  margin:auto;
  overflow:auto;
  padding:26px 22px;
  border:1px solid var(--border-modal);
  border-radius:18px;
  background:linear-gradient(145deg,var(--bg-modal1),var(--bg-modal2));
  color:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.65);
}
.game-popover:popover-open{display:block;animation:mIn .28s cubic-bezier(.23,1,.32,1)}
.game-popover::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(2px)}
.game-popover.rtp-low .mgr{color:#ff795f}

/* ===== FLOATING BUTTONS ===== */
.float-btns{position:fixed;bottom:24px;left:16px;display:flex;flex-direction:column;gap:10px;z-index:998}
.float-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,0.35);transition:transform .2s,box-shadow .2s}
.float-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.4)}
.float-btn svg{width:26px;height:26px;fill:#fff}
.float-btn-wa{background:#25D366}
.float-btn-tg{background:#229ED9}

/* ===== MOBILE ===== */
@media(max-width:480px){
  header{padding:8px 11px}
  .logo img{height:28px}
  .clock{display:none}
  .main{padding:12px 10px}
  .ggrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .grtp{font-size:1rem}
  /* win card mobile */
  .win-card{width:130px;padding:10px}
  .wimg{height:65px}
  .wi-game{font-size:.7rem}
  .wr-rtp{font-size:.88rem}
  .ws{font-size:.5rem;padding:2px 5px}
}

/* ===== TABLET ===== */
@media(min-width:481px) and (max-width:768px){
  .ggrid{grid-template-columns:repeat(3,1fr)}
}

/* ===== DESKTOP ===== */
@media(min-width:1024px){
  header{padding:12px 32px;backdrop-filter:blur(12px);background:rgba(100, 15, 15, 0.97)}
  .logo img{height:40px}
  .main{padding:22px 32px}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
  .grtp{font-size:1.2rem}
}

@media(min-width:1280px){
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

/* =====================================================
   PROVIDER — GLASS PANEL ENHANCEMENT
   Tambahan visual saja: struktur HTML dan posisi provider
   tetap mengikuti CSS provider yang sudah ada.
   ===================================================== */

.pv-outer{
  position:relative;
  isolation:isolate;
  padding:10px 12px;
  border:1px solid rgba(255,224,195,.20);
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(36,10,7,.62) 0%,rgba(90,24,12,.38) 48%,rgba(24,7,5,.56) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    0 0 24px rgba(196,76,34,.08),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,126,72,.08);
}

/* Kilau kaca lembut tanpa menutup card / panah */
.pv-outer::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(105deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.025) 18%,
      transparent 38%,
      transparent 72%,
      rgba(255,174,116,.045) 100%);
}

/* Garis glow tipis di bagian bawah panel */
.pv-outer::after{
  content:'';
  position:absolute;
  left:5%;
  right:5%;
  bottom:-1px;
  height:1px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(232,168,124,.42),rgba(224,112,80,.34),transparent);
  filter:drop-shadow(0 0 5px rgba(224,112,80,.22));
}

.pv-outer > *{
  position:relative;
  z-index:1;
}

/* Sedikit depth di area carousel, tanpa gradient gelap yang memotong card */
.pv-wrap{
  border-radius:16px;
  background:rgba(255,255,255,.018);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(255,255,255,.018);
}

/* Panah dibuat menyatu dengan panel kaca */
.pv-arr{
  background:
    linear-gradient(145deg,rgba(245,151,83,.96) 0%,rgba(192,98,42,.92) 58%,rgba(132,44,20,.96) 100%);
  border:1px solid rgba(255,229,203,.48);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  box-shadow:
    0 6px 16px rgba(0,0,0,.34),
    0 0 0 2px rgba(232,168,124,.075),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(110,30,12,.18);
}

.pv-arr:hover{
  transform:translateY(-1px) scale(1.055);
  filter:brightness(1.08);
  box-shadow:
    0 8px 20px rgba(0,0,0,.40),
    0 0 14px rgba(232,168,124,.26),
    inset 0 1px 0 rgba(255,255,255,.44);
}

/* Card lebih bersih dan konsisten di atas kaca */
.pv-card{
  border-color:rgba(255,255,255,.74);
  background:linear-gradient(155deg,rgba(255,255,255,.98) 0%,rgba(250,247,243,.97) 58%,rgba(238,230,223,.96) 100%);
  box-shadow:
    0 7px 16px rgba(0,0,0,.25),
    0 1px 0 rgba(255,255,255,.75) inset;
}

.pv-card:hover{
  border-color:rgba(232,168,124,.92);
  box-shadow:
    0 9px 20px rgba(0,0,0,.32),
    0 0 14px rgba(224,112,80,.16),
    inset 0 1px 0 rgba(255,255,255,.98);
}

/* Provider aktif tetap jelas, namun glow dibuat lebih rapi */
.pv-card.active{
  border-color:#E07050;
  background:linear-gradient(155deg,#fff 0%,#fff9f4 58%,#f7e5d9 100%);
  box-shadow:
    0 0 0 2px rgba(232,168,124,.17),
    0 0 16px rgba(224,112,80,.26),
    0 8px 18px rgba(0,0,0,.30),
    inset 0 1px 0 #fff;
}

.pv-card.active::after{
  height:3px;
  left:22%;
  right:22%;
  background:linear-gradient(90deg,#E8A87C 0%,#F29A67 45%,#E07050 68%,#E8A87C 100%);
  box-shadow:0 0 7px rgba(224,112,80,.35);
}

/* Glass dibuat lebih ringan pada layar kecil supaya rendering tetap halus */
@media(max-width:768px){
  .pv-outer{
    padding:8px 7px;
    border-radius:18px;
    -webkit-backdrop-filter:blur(8px) saturate(125%);
    backdrop-filter:blur(8px) saturate(125%);
    box-shadow:
      0 8px 20px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.13);
  }

  .pv-wrap{border-radius:13px}
}

@media(max-width:480px){
  .pv-outer{
    padding:7px 5px;
    border-radius:16px;
    gap:6px;
    margin-bottom:20px;
  }

  .pv-arr{
    box-shadow:
      0 4px 10px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.34);
  }

  .pv-card{
    box-shadow:
      0 5px 12px rgba(0,0,0,.23),
      inset 0 1px 0 rgba(255,255,255,.82);
  }
}

/* Fallback untuk browser yang belum mendukung backdrop-filter */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .pv-outer{
    background:linear-gradient(135deg,rgba(36,10,7,.92),rgba(82,22,11,.88),rgba(24,7,5,.92));
  }
}