/* =========================================================
   SpinShop-IDNC — MAIN STYLES (v4 — fixed to not break game pages)
   File: /assets/css/main.css
   Theme: Black + Gold
   ========================================================= */

/* GLOBAL — minimal, no body bg override */
*{ box-sizing: border-box; }
html{ margin: 0; padding: 0; }
body{
  margin: 0;
  padding: 0;
  color: #f4f4f4;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a{ color: #d4af37; text-decoration: none; }
a:hover{ color: #f5d77e; }
img{ max-width: 100%; display: block; }

/* Body background HANYA jika class .sp-home-bg ada (homepage saja) */
body.sp-home-bg{
  background:
    radial-gradient(ellipse at top, rgba(212,175,55,0.06), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(212,175,55,0.03), transparent 50%),
    #000;
  min-height: 100vh;
}

/* =============== NAV =============== */
/* v31: position FIXED supaya header benar-benar freeze saat scroll
   (sticky kadang gagal di iOS Safari ketika body punya overflow-x: hidden) */
.sp-nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #1f1f1f;
  font-family: 'Poppins', system-ui, sans-serif;
  color: #f4f4f4;
}
/* v31: Body padding-top supaya konten tidak ketutup nav fixed.
   Berlaku untuk semua halaman yg pakai _nav.php (home, lucky-wheel, spinshop, dll). */
body.sp-home-bg,
body.lw-page,
body.has-sp-nav,
body.bg-page {
  padding-top: 66px;
}
@media (max-width: 480px){
  body.sp-home-bg,
  body.lw-page,
  body.has-sp-nav,
  body.bg-page {
    padding-top: 60px;
  }
}
.sp-nav-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
}
.sp-brand{ display: flex; align-items: center; gap: 12px; color: #f4f4f4; text-decoration: none; }
.sp-brand img{ width: 40px; height: 40px; border-radius: 8px; }
.sp-brand-text{
  font-weight: 900; font-size: 16px; letter-spacing: 1px; line-height: 1;
  color: #d4af37; display: flex; flex-direction: column;
}
.sp-brand-text small{
  font-size: 9.5px; font-weight: 500; letter-spacing: 1.5px;
  color: #aaa; margin-top: 4px;
}
.sp-nav-menu{ display: flex; align-items: center; gap: 4px; }
.sp-nav-menu a{
  color: #ccc; padding: 8px 14px; font-weight: 600; font-size: 13.5px;
  border-radius: 8px; letter-spacing: 0.3px;
  transition: background .15s, color .15s; text-decoration: none;
}
.sp-nav-menu a:hover{ background: #1a1a1a; color: #d4af37; }
.sp-nav-menu a.active{ background: linear-gradient(135deg, #d4af37, #a08220); color: #1a1a0a; }
.sp-nav-actions{ display: flex; align-items: center; gap: 10px; }

.sp-login-btn{
  background: linear-gradient(180deg, #f5d77e, #d4af37 60%, #a08220);
  color: #1a1a0a; border: 0;
  padding: 9px 18px; border-radius: 9px;
  font-weight: 800; font-size: 13px; letter-spacing: 1px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(212,175,55,0.32);
  font-family: inherit;
}
.sp-login-btn:hover{ filter: brightness(1.08); box-shadow: 0 6px 18px rgba(212,175,55,0.45); }
.sp-login-btn svg{ width: 16px; height: 16px; }

.sp-user-pill{
  display: flex; align-items: center; gap: 10px;
  background: #141414; border: 1px solid #2a2a2a;
  padding: 5px 6px 5px 5px; border-radius: 99px;
}
.sp-user-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #a08220);
  color: #1a1a0a; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.sp-user-info{ font-size: 11.5px; line-height: 1.2; display: flex; flex-direction: column; }
.sp-user-info b{ font-size: 13px; color: #f4f4f4; }
.sp-user-info span{ color: #aaa; }
.sp-user-info b#navCoupon, .sp-user-info b#navZonk{ color: #d4af37; font-size: 11.5px; }

.sp-user-logout{
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: #2a2a2a; color: #ccc; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sp-user-logout:hover{ background: #e23838; color: #fff; }
.sp-user-logout svg{ width: 14px; height: 14px; }

.sp-nav-toggle{
  display: none; background: #1a1a1a; border: 1px solid #2a2a2a;
  color: #d4af37; width: 38px; height: 38px; border-radius: 9px;
  font-size: 18px; cursor: pointer; font-family: inherit;
}

/* =============== AUTH MODAL =============== */
.sp-auth-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  z-index: 9999; display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.sp-auth-modal.show{ display: flex; }
.sp-auth-card{
  background: linear-gradient(180deg, #141414 0%, #1a1a1a 100%);
  border: 1px solid #2a2a2a; border-radius: 18px;
  padding: 30px 28px 26px; width: 100%; max-width: 420px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(212,175,55,0.18);
}
.sp-auth-close{
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #2a2a2a; border: 0; color: #ccc;
  font-size: 20px; cursor: pointer; font-family: inherit; line-height: 1;
}
.sp-auth-close:hover{ background: #3a3a3a; }
.sp-auth-brand{ text-align: center; margin-bottom: 22px; }
.sp-auth-brand img{ width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 12px; }
.sp-auth-brand h2{ font-size: 22px; margin: 0 0 4px; color: #d4af37; letter-spacing: 2px; }
.sp-auth-brand p{ font-size: 13px; color: #aaa; margin: 0; }
.sp-auth-tabs{
  display: flex; background: #0d0d0d; border-radius: 10px;
  padding: 4px; margin-bottom: 20px; gap: 4px;
}
.sp-auth-tab{
  flex: 1; padding: 8px 14px; border: 0; background: transparent;
  color: #aaa; border-radius: 8px; font-weight: 700; font-size: 12.5px;
  cursor: pointer; letter-spacing: 1px; font-family: inherit;
  transition: background .15s, color .15s;
}
.sp-auth-tab.active{
  background: linear-gradient(180deg, #d4af37, #a08220);
  color: #1a1a0a;
}
.sp-auth-label{ display: block; margin-bottom: 14px; }
.sp-auth-label span{
  display: block; font-size: 11.5px; color: #aaa;
  margin-bottom: 6px; letter-spacing: 0.5px; font-weight: 600;
}
.sp-auth-label input{
  width: 100%; padding: 11px 14px;
  background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 9px;
  color: #f4f4f4; font-size: 14px; font-family: inherit; outline: none;
  transition: border-color .15s, background .15s;
}
.sp-auth-label input:focus{ border-color: #d4af37; background: #111; }
.sp-auth-btn{
  width: 100%; padding: 12px 18px;
  background: linear-gradient(180deg, #f5d77e, #d4af37 60%, #a08220);
  border: 0; border-radius: 10px; color: #1a1a0a;
  font-weight: 800; font-size: 14px; letter-spacing: 1.5px;
  cursor: pointer; margin-top: 4px; font-family: inherit;
  box-shadow: 0 6px 18px rgba(212,175,55,0.32);
}
.sp-auth-btn:hover{ filter: brightness(1.08); }
.sp-auth-btn:disabled{ opacity: 0.6; cursor: wait; }
.sp-auth-foot{ text-align: center; font-size: 12px; color: #aaa; margin: 14px 0 0; }

/* =============== HOMEPAGE HERO (hanya kalau .sp-home-bg) =============== */
.sp-home-bg .sp-hero{
  max-width: 1280px; margin: 0 auto;
  padding: 50px 20px 30px; text-align: center;
}
.sp-home-bg .sp-hero h1{
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900; margin: 0 0 8px;
  letter-spacing: 1px; line-height: 1.1;
}
.sp-home-bg .sp-hero h1 .accent{
  background: linear-gradient(180deg, #f5d77e, #d4af37, #a08220);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; display: inline-block;
}
.sp-home-bg .sp-hero p{
  font-size: clamp(13px, 2.2vw, 16px); color: #bbb;
  max-width: 620px; margin: 8px auto 0; line-height: 1.5;
}

.sp-home-bg .sp-games-grid{
  max-width: 1280px; margin: 0 auto;
  padding: 20px 20px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
.sp-home-bg .sp-game-card{
  position: relative;
  background: linear-gradient(180deg, #131313 0%, #0d0d0d 100%);
  border: 1px solid #232323; border-radius: 18px;
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; min-height: 380px;
  transform: translateY(-4px);
  border-color: rgba(255, 214, 70, 0.75);
  box-shadow: 0 2px 0 rgba(255, 238, 140, 0.25), 0 6px 0 rgba(85, 42, 0, 0.45), 0 14px 26px rgba(0, 0, 0, 0.78), 0 0 20px rgba(255, 213, 0, 0.65), 0 0 42px rgba(255, 119, 0, 0.38), 0 0 70px rgba(255, 174, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -14px 24px rgba(255, 136, 0, 0.06);
}
.sp-home-bg .sp-game-card:hover{
  /* v32: Hover glow vibrant — gold + orange multi-layer shadow + brighter border */
  transform: translateY(-4px);
  border-color: rgba(255, 214, 70, 0.75);
  box-shadow:
    0 2px 0 rgba(255, 238, 140, 0.25),
    0 6px 0 rgba(85, 42, 0, 0.45),
    0 14px 26px rgba(0, 0, 0, 0.78),
    0 0 20px rgba(255, 213, 0, 0.65),
    0 0 42px rgba(255, 119, 0, 0.38),
    0 0 70px rgba(255, 174, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -14px 24px rgba(255, 136, 0, 0.06);
}
.sp-home-bg .sp-game-cover{
  width: 100%; height: 200px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
}
.sp-home-bg .sp-game-cover::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
}
.sp-home-bg .sp-game-cover img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sp-home-bg .sp-game-card:hover .sp-game-cover img{ transform: scale(1.06); }
.sp-home-bg .sp-game-badge{
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,0.7); border: 1px solid rgba(212,175,55,0.45);
  color: #d4af37; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.3px; padding: 5px 10px; border-radius: 99px; z-index: 3;
}
.sp-home-bg .sp-game-badge.login-req{ background: rgba(226,56,56,0.18); border-color: rgba(226,56,56,0.55); color: #ff9999; }
.sp-home-bg .sp-game-badge.no-login{ background: rgba(43,182,115,0.16); border-color: rgba(43,182,115,0.5); color: #6ee7b7; }
.sp-home-bg .sp-game-body{ padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.sp-home-bg .sp-game-body h3{ font-size: 19px; margin: 0 0 6px; letter-spacing: 0.6px; color: #d4af37; }
.sp-home-bg .sp-game-body p{ font-size: 13px; color: #aaa; line-height: 1.5; margin: 0 0 14px; flex: 1; }
.sp-home-bg .sp-game-feats{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sp-home-bg .sp-game-feat{
  font-size: 10.5px; background: #1a1a1a; border: 1px solid #292929;
  color: #ccc; padding: 4px 9px; border-radius: 99px;
  font-weight: 600; letter-spacing: 0.3px;
}
.sp-home-bg .sp-game-btn{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #d4af37, #a08220);
  color: #1a1a0a; padding: 11px 16px; border-radius: 10px;
  font-weight: 800; font-size: 13px; letter-spacing: 1px;
  border: 0; cursor: pointer; font-family: inherit; text-decoration: none;
}
.sp-home-bg .sp-game-btn:hover{ filter: brightness(1.08); box-shadow: 0 6px 18px rgba(212,175,55,0.3); }
.sp-home-bg .sp-game-btn svg{ width: 16px; height: 16px; }

.sp-home-bg .sp-about{ max-width: 1100px; margin: 0 auto 60px; padding: 30px 20px; }
.sp-home-bg .sp-about-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
}
.sp-home-bg .sp-about-card{
  background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 14px;
  padding: 22px 20px; text-align: center;
}
.sp-home-bg .sp-about-card .ico{ font-size: 28px; margin-bottom: 8px; }
.sp-home-bg .sp-about-card b{ display: block; margin-bottom: 4px; color: #d4af37; font-size: 14px; }
.sp-home-bg .sp-about-card span{ font-size: 12.5px; color: #aaa; line-height: 1.5; }

.sp-footer{
  background: #050505; border-top: 1px solid #1a1a1a;
  padding: 18px 20px; text-align: center;
  font-size: 12px; color: #777; letter-spacing: 0.3px;
}

/* =============== RESPONSIVE =============== */
@media (max-width: 840px){
  .sp-nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }
  .sp-nav-menu{
    position: absolute; top: 100%; left: 0; right: 0;
    background: #0a0a0a; flex-direction: column;
    padding: 12px 20px 16px; border-bottom: 1px solid #1a1a1a;
    gap: 4px; display: none;
  }
  .sp-nav-menu.show{ display: flex; }
  .sp-nav-menu a{ width: 100%; }
  .sp-brand-text{ font-size: 14px; }
  .sp-brand-text small{ font-size: 8.5px; }
  /* v31: TAMPILKAN coupon & zonk di mobile (sebelumnya .sp-user-info di hidden semua).
     Username (<b>) disembunyikan supaya pill tetap kompak,
     tapi value 🎟️coupon · 😬zonk tetap terlihat. */
  .sp-user-info{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    gap: 1px;
  }
  .sp-user-info > b:first-child{ display: none; }   /* hide username on mobile */
  .sp-user-info span{
    display: block;
    font-size: 11px;
    color: #f0c040;
    font-weight: 700;
    white-space: nowrap;
  }
  .sp-user-info b#navCoupon,
  .sp-user-info b#navZonk{
    font-size: 11px;
    color: #f0c040;
  }
  /* Halaman yang tidak pakai coupon/zonk (lucky-wheel, home) → sembunyikan total di mobile */
  body.lw-page .sp-user-info,
  body.bg-page .sp-user-info,
  body.sp-home-bg .sp-user-info{
    display: none !important;
  }
}
@media (max-width: 480px){
  .sp-nav-inner{ padding: 10px 14px; }
  /* v31: HAPUS rule `.sp-login-btn span { display: none }` yang membunuh animasi.
     Login button mobile sekarang TETAP punya animasi (fold, points, inner-btn). */
  .sp-login-btn{ padding: 9px 14px !important; }
  .sp-user-avatar{ width: 28px; height: 28px; font-size: 13px; }
  .sp-user-info span{ font-size: 10.5px; }
}

/* v37: Toast notif (warning "Coupon kurang" dll) — di MOBILE letakkan di
   TENGAH-TENGAH viewport (vertikal + horizontal center). Sebelumnya top:105px
   masih kelihatan di atas tapi user merasa kepotong/bug. Sekarang dead-center
   tidak akan ketutup nav fixed atau float buttons. */
@media (max-width: 768px){
  .toast{
    /* Override BASE rule yg pakai top:90px dari style12.css */
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 10001 !important;
    /* Hidden state: di tengah, scale lebih kecil */
    transform: translate(-50%, -50%) scale(0.88) !important;
    max-width: 86vw !important;
    min-width: 240px !important;
  }
  .toast.show{
    /* Shown state: di tengah, scale 1 */
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* ============================================================ */
/* v9: LUCKY WHEEL SPECIFIC NAV OVERRIDES                       */
/* Hide coupon/zonk badges, show only username + logout         */
/* ============================================================ */
body.lw-page .sp-user-info span {
  /* Hide the 🎟️5 · 😬2 line */
  display: none !important;
}
body.lw-page .sp-user-info b {
  /* Username stays visible, slightly bigger */
  font-size: 13px;
  color: #f0c040;
}
body.lw-page .sp-user-pill {
  /* Tighter pill without badge clutter */
  padding-right: 12px;
}

/* ============================================================ */
/* v9: COLLECTION GAME NAV ICON FIX                             */
/* Force favicon.webp for collection-game custom nav            */
/* ============================================================ */
.sp-nav-overlay .nav-brand img {
  width: 40px !important; height: 40px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: transparent !important;
}

/* ============================================================ */
/* v19: REFRESH BUTTON                                          */
/* ============================================================ */
.sp-refresh-btn {
  background: rgba(245,200,66,0.12);
  border: 1px solid rgba(245,200,66,0.35);
  color: #f0c040;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin-right: 6px;
  transition: transform .35s, background .2s;
}
.sp-refresh-btn svg { width: 16px; height: 16px; }
.sp-refresh-btn:hover {
  background: rgba(245,200,66,0.28);
  border-color: rgba(245,200,66,0.6);
  transform: rotate(180deg);
}
.sp-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sp-refresh-btn.spinning { animation: sp-spin-rotate 0.6s linear; }
@keyframes sp-spin-rotate { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@media (max-width: 768px) {
  .sp-refresh-btn { width: 30px; height: 30px; }
  .sp-refresh-btn svg { width: 14px; height: 14px; }
}

body.lw-page .sp-refresh-btn,
body.bg-page .sp-refresh-btn,
body.sp-home-bg .sp-refresh-btn,
body.cg-page .sp-refresh-btn,
body.lw-page .sp-user-info span,
body.bg-page .sp-user-info span,
body.sp-home-bg .sp-user-info span,
body.cg-page .sp-user-info span {
  display: none !important;
}
/* v32: Collection page nav — TAMPILKAN username (jangan disembunyikan oleh
   rule mobile yang hide b:first-child di .sp-user-info). */
body.cg-page .sp-user-info b{
  font-size: 13px;
  color: #f0c040;
}
body.cg-page .sp-user-pill{ padding-right: 12px; }
@media (max-width: 840px){
  body.cg-page .sp-user-info{
    display: flex !important;
    flex-direction: row;
    align-items: center;
  }
  body.cg-page .sp-user-info > b:first-child{
    display: block !important;   /* override rule global hide username */
    font-size: 12px;
  }
}
/* v31: Pada halaman halaman tsb, di mobile sekalian sembunyikan seluruh user-info
   (kalau hanya span yang di-hide, .sp-user-info jadi container kosong) */
@media (max-width: 840px){
  body.lw-page .sp-user-info,
  body.bg-page .sp-user-info,
  body.sp-home-bg .sp-user-info{
    display: none !important;
  }
}

/* ============================================================ */
/* v19: VIEW-ONLY MODE                                          */
/* ============================================================ */
body.view-only .shop-btn,
body.view-only .spin-btn,
body.view-only #spinBtn,
body.view-only .btn-spin,
body.view-only .btn-market,
body.view-only .btn-riwayat {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
  pointer-events: none;
}
body.view-only .shop-btn::after,
body.view-only #spinBtn::after,
body.view-only .btn-spin::after { content: ' 🔒'; font-size: 0.85em; }

.view-only-banner {
  background: linear-gradient(90deg, rgba(245,200,66,0.15), rgba(245,200,66,0.08));
  border: 1px solid rgba(245,200,66,0.4);
  border-radius: 12px;
  padding: 12px 18px;
  margin: 10px 16px;
  text-align: center;
  color: #f0c040;
  font-size: 13px;
  font-weight: 600;
}
.view-only-banner a {
  background: linear-gradient(135deg, #d4af37, #f0c040);
  color: #1a0a0e;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 800;
  text-decoration: none;
  margin-left: 8px;
  display: inline-block;
}

/* ============================================================ */
/* v19: FLOAT-KIRI-BAWAH (EXACT spin2 orig)                     */
/* ============================================================ */
.float-kiri-bawah {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.float-rtp-link { display: block; transition: transform .2s; }
.float-rtp-link:hover { transform: scale(1.1); }
.float-rtp-gif { width: 64px; height: auto; display: block; }

.float-barcode-wrap { position: relative; width: 72px; cursor: pointer; }
.float-barcode-img {
  width: 72px; height: 72px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid rgba(200,150,12,0.5);
  background: #fff;
  display: block;
  transition: transform .3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.float-barcode-wrap:hover .float-barcode-img { transform: scale(1.08); }
.float-barcode-zoom {
  position: absolute;
  bottom: 80px; left: 0;
  width: 216px; height: 216px;
  background: #fff;
  border-radius: 12px;
  border: 2px solid rgba(200,150,12,0.7);
  box-shadow: 0 8px 30px rgba(0,0,0,0.7);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: scale(0.6);
  transform-origin: bottom left;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  z-index: 9999;
}
.float-barcode-zoom img { width: 100%; height: 100%; object-fit: contain; }
.float-barcode-wrap:hover .float-barcode-zoom {
  opacity: 1; visibility: visible; transform: scale(1);
}

.float-livechat-btn {
  display: block;
  width: 70px; height: 70px;
  margin-bottom: 6px;
  animation: goyang 2s ease-in-out infinite;
}
.float-livechat-btn img { width: 100%; height: 100%; object-fit: contain; }
@keyframes goyang {
  0%,100% { transform: translateY(0); }
  25%     { transform: translateY(-5px); }
  75%     { transform: translateY(3px); }
}

/* NOTIF KANAN */
.notif-kanan {
  position: fixed;
  bottom: 10px; right: 15px;
  z-index: 9999;
  cursor: pointer;
}
.notif-circle {
  width: 70px; height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.notif-circle img { width: 100%; height: 100%; object-fit: contain; background: white; }
.notif-drop {
  position: absolute;
  bottom: 78px; right: 0;
  background: white;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  padding: 10px;
  opacity: 0; visibility: hidden;
  transition: 0.3s;
}
.notif-kanan:hover .notif-drop { opacity: 1; visibility: visible; }
.notif-drop a {
  display: block;
  padding: 9px 10px;
  margin: 4px 0;
  background: #f0f8ff;
  color: #0066cc;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif, 'Poppins';
  transition: background .2s;
}
.notif-drop a:hover { background: #ddeeff; }

@media (max-width: 480px) {
  /* v32: Float bottom = 30px (sebelumnya 14px terlalu nempel,
     iOS Safari bottom safe-area bisa nutupin) */
  .float-kiri-bawah { bottom: 30px; left: 10px; }
  .float-barcode-wrap { width: 58px; }
  .float-barcode-img { width: 58px; height: 58px; }
  .float-barcode-zoom { width: 174px; height: 174px; }
  .float-rtp-gif { width: 52px; }
  .notif-kanan { bottom: 30px; right: 10px; }
  .notif-circle { width: 58px; height: 58px; }
  .float-livechat-btn { width: 58px; height: 58px; }
}

/* ============================================================ */
/* v19: LUCKY WHEEL WIN POPUP — BLACK + GOLD GRADIENT          */
/* (NO BLUR background — user request)                          */
/* ============================================================ */
.lw-win-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);  /* solid dark overlay — no blur */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: lw-win-fadein .3s;
}
.lw-win-popup-overlay.show { display: flex; }
@keyframes lw-win-fadein { from{opacity:0} to{opacity:1} }

/* v19: BLACK + GOLD gradient (transparent), text contrast ok */
.lw-win-card {
  background: linear-gradient(135deg,
    rgba(15,12,5,0.94) 0%,
    rgba(45,35,10,0.88) 35%,
    rgba(80,60,18,0.85) 50%,
    rgba(45,35,10,0.88) 65%,
    rgba(15,12,5,0.94) 100%);
  border: 2px solid rgba(212,175,55,0.7);
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  padding: 30px 26px;
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px rgba(212,175,55,0.3), 0 20px 60px rgba(0,0,0,0.7);
  animation: lw-win-pop .5s cubic-bezier(.34,1.56,.64,1);
  overflow: visible; /* close button bisa render */
}
@keyframes lw-win-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* v19: Close button INSIDE the card top-right (tidak ke-cut) */
.lw-win-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(212,175,55,0.5);
  color: #f0c040;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .2s, transform .15s, border-color .2s;
}
.lw-win-close-btn:hover {
  background: rgba(212,175,55,0.3);
  border-color: rgba(212,175,55,1);
  transform: scale(1.1);
  color: #fff;
}

.lw-win-emoji {
  font-size: 56px;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 8px rgba(212,175,55,0.4));
}
.lw-win-title {
  color: #f0c040;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 4px;
  margin: 0 0 12px 0;
  text-shadow: 0 4px 14px rgba(212,175,55,0.6);
}
.lw-win-username {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}
.lw-win-level {
  display: inline-block;
  background: linear-gradient(135deg, #d4af37, #f0c040);
  color: #1a0a0e;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 12px;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.lw-win-text {
  color: #d0d0d0;
  font-size: 13px;
  margin: 0 0 12px 0;
}
.lw-win-prize {
  background: linear-gradient(135deg, #d4af37, #f0c040, #d4af37);
  color: #1a0a0e;
  padding: 16px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 20px;
  margin: 0 0 14px 0;
  box-shadow: 0 6px 20px rgba(212,175,55,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}
.lw-win-foot {
  color: #999;
  font-size: 11px;
  margin: 0 0 14px 0;
}
.lw-win-claim {
  display: inline-block;
  background: linear-gradient(135deg, #00A7ED, #0577b0);
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 20px rgba(0,167,237,0.5);
  transition: transform .15s;
}
.lw-win-claim:hover { transform: translateY(-2px); }

/* ============================================================ */
/* v19: FIX HISTORY POPUP — close × button visible              */
/* ============================================================ */
.lw-popup-container,
.lw-popup-content {
  overflow: visible !important;
}
.lw-popup-close {
  /* Reposition INSIDE the gold header — fully visible */
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 100 !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(0,0,0,0.4) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  line-height: 1;
}
.lw-popup-close:hover {
  background: rgba(0,0,0,0.7) !important;
  border-color: #fff !important;
}

/* ============================================================ */
/* v30: BERANDA BACKGROUND IMAGE (bgberanda.webp)               */
/* ============================================================ */
body.sp-home-bg {
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.70)),
    url('/assets/bgberanda.webp') center center / cover no-repeat fixed;
  background-color: #0a0a0f;
}
@media (max-width: 768px) {
  body.sp-home-bg {
    background:
      linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.70)),
      url('/assets/bgberandamobile.webp') center center / cover no-repeat fixed;
  }
}

/* ============================================================ */
/* v30: NAV HEADER ANIMATION (Uiverse asgardOP)                 */
/* Pakai warna GOLD (current theme), bukan tomato example       */
/* Target: .sp-nav-menu a (existing structure, no HTML change)  */
/* ============================================================ */
.sp-nav-menu a {
  position: relative;
  z-index: 1;
  overflow: visible;
  /* keep existing color from main8.css */
}

/* Small square at left (default state) */
.sp-nav-menu a::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #d4af37; /* GOLD theme color */
  /* v37: dari left:-10px → left:0px per request user (titik kuning di samping
     kiri menu sekarang TEPAT di kiri menu, tidak menonjol keluar) */
  left: 0px;
  top: 50%;
  margin-top: -3px;
  border-radius: 1px;
  transform: rotate(225deg);
  transition: 0.3s;
  z-index: -1;
  pointer-events: none;
}

/* Hover: square grows into full button background */
.sp-nav-menu a:hover {
  color: #1a1a0a !important; /* dark text on gold bg */
  background: transparent !important; /* override the dark hover bg */
}
.sp-nav-menu a:hover::before {
  transform: rotate(0deg);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-top: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5d77e, #d4af37); /* GOLD gradient */
}

/* Active state - keep gold gradient as before */
.sp-nav-menu a.active::before {
  display: none; /* hide square when active */
}

/* v34: FIX — saat menu AKTIF di-hover, background gold tetap muncul.
   Sebelumnya hover override jadi transparent dan ::before di-disable
   karena .active, sehingga gold hilang. */
.sp-nav-menu a.active,
.sp-nav-menu a.active:hover {
  background: linear-gradient(135deg, #f5d77e, #d4af37) !important;
  color: #1a1a0a !important;
}
.sp-nav-menu a.active:hover::before {
  display: none !important;
}

/* ============================================================ */
/* v30: BADGE BUTTON Uiverse-StealthWorm (TANPA/PERLU LOGIN)    */
/* Pakai struktur lengkap (container-stars, stars, glow, circle)*/
/* ============================================================ */
.sp-game-badge {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 11rem;
  height: 2.5rem;
  overflow: hidden;
  background-size: 300% 300%;
  cursor: pointer;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: sp-badge-gradient 5s ease infinite;
  border: double 3px transparent;
  background-origin: border-box;
  background-clip: content-box, border-box;
  position: relative;
  z-index: 3;
  padding: 0;
}

/* TANPA LOGIN — dominasi HIJAU transparan */
.sp-game-badge.no-login {
  background-image:
    linear-gradient(rgba(10,30,15,0.65), rgba(10,30,15,0.65)),
    linear-gradient(137.48deg, #a8ff7c 10%, #4cff5a 45%, #20cc28 67%, #006611 87%);
}

/* PERLU LOGIN — dominasi MERAH transparan */
.sp-game-badge.login-req {
  background-image:
    linear-gradient(rgba(30,8,8,0.65), rgba(30,8,8,0.65)),
    linear-gradient(137.48deg, #ff9eb5 10%, #ff4d7d 45%, #c81212 67%, #420009 87%);
}

/* container-stars */
.sp-game-badge .container-stars {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  top: 0; left: 0;
}

/* strong (text label) */
.sp-game-badge strong {
  z-index: 2;
  font-family: 'Poppins', 'Avalors Personal Use', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: #ffffff;
  text-shadow: 0 0 4px white;
  text-transform: uppercase;
  font-weight: 800;
  position: relative;
}

/* glow container */
.sp-game-badge .glow {
  position: absolute;
  display: flex;
  width: 10rem;
}

/* circles inside glow */
.sp-game-badge .circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: sp-badge-pulse 4s infinite;
  z-index: -1;
}

/* HIJAU circles */
.sp-game-badge.no-login .circle:nth-of-type(1) {
  background: rgba(76, 255, 90, 0.65);
}
.sp-game-badge.no-login .circle:nth-of-type(2) {
  background: rgba(32, 204, 40, 0.7);
}

/* MERAH circles */
.sp-game-badge.login-req .circle:nth-of-type(1) {
  background: rgba(255, 77, 125, 0.65);
}
.sp-game-badge.login-req .circle:nth-of-type(2) {
  background: rgba(200, 18, 18, 0.7);
}

/* stars container */
.sp-game-badge .stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}
.sp-game-badge .stars::after,
.sp-game-badge .stars::before {
  content: "";
  position: absolute;
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}
.sp-game-badge .stars::after {
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: sp-badge-star-rotate 90s linear infinite;
}
.sp-game-badge .stars::before {
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: sp-badge-star-move 60s linear infinite;
  opacity: 0.5;
}

/* hover effects */
.sp-game-card:hover .sp-game-badge .container-stars {
  z-index: 1;
  background-color: rgba(33, 33, 33, 0.7);
}
.sp-game-card:hover .sp-game-badge {
  transform: scale(1.05);
}

@keyframes sp-badge-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes sp-badge-pulse {
  0%   { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0,0,0,0.7); }
  70%  { transform: scale(1); box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  100% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes sp-badge-star-rotate {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0); }
}
@keyframes sp-badge-star-move {
  from { transform: translateY(0); }
  to   { transform: translateY(-135rem); }
}

@media (max-width: 480px) {
  .sp-game-badge { width: 9rem; height: 2.2rem; }
  .sp-game-badge strong { font-size: 10px; letter-spacing: 2px; }
}

/* ============================================================ */
/* v30: CTA BUTTON Uiverse-chase2k25 hacker-button cheetah      */
/* Structure: span + overlay + border-anim + particles          */
/* ============================================================ */
.sp-game-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 24px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 16px !important;
  text-transform: uppercase;
  color: #ffcc00 !important;
  background: rgba(0,0,0,0.85) !important;
  border: 2px solid #ffcc00 !important;
  border-radius: 5px !important;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
  letter-spacing: 1.5px;
  font-weight: 700;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}

/* Inner text span */
.sp-game-btn > span:first-child {
  position: relative;
  display: inline-block;
  transition: transform 0.1s;
  z-index: 2;
}

/* Scan effect (cheetah speed) */
.sp-game-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,204,0,0.3), transparent);
  animation: sp-btn-scan 2s linear infinite;
  pointer-events: none;
}

/* Cheetah spots background */
.sp-game-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle, rgba(255,204,0,0.2) 10%, transparent 11%),
    radial-gradient(circle at 70% 30%, rgba(255,204,0,0.15) 8%, transparent 9%),
    radial-gradient(circle at 20% 80%, rgba(255,204,0,0.25) 7%, transparent 8%);
  background-size: 20px 20px, 25px 25px, 15px 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: sp-btn-spot-shift 3s infinite ease-in-out;
  pointer-events: none;
}

/* Pulse overlay */
.sp-game-btn .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(255,204,0,0.1) 0%, transparent 70%);
  opacity: 0;
  z-index: 0;
  animation: sp-btn-pulse 3s infinite ease-in-out;
  pointer-events: none;
}

/* Border animation */
.sp-game-btn .border-anim {
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 2px dashed #ffcc00;
  opacity: 0.6;
  animation: sp-btn-border-leap 2s infinite linear;
  pointer-events: none;
}

/* Particles container */
.sp-game-btn .particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.sp-game-btn .particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffcc00;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sp-game-btn .particle-1 { top: 15%; left: 25%; animation: sp-particle-1 1.8s infinite; }
.sp-game-btn .particle-2 { top: 35%; left: 65%; animation: sp-particle-2 2.2s infinite; }
.sp-game-btn .particle-3 { top: 55%; left: 45%; animation: sp-particle-3 1.6s infinite; }
.sp-game-btn .particle-4 { top: 75%; left: 15%; animation: sp-particle-4 2s infinite; }
.sp-game-btn .particle-5 { top: 25%; left: 85%; animation: sp-particle-5 2.1s infinite; }

/* Hover effects */
.sp-game-card:hover .sp-game-btn {
  box-shadow:
    0 0 20px #ffcc00,
    0 0 40px #ffcc00,
    inset 0 0 10px #ffcc00;
  transform: translateY(-5px) scale(1.05);
  color: #fff !important;
  animation: sp-btn-pounce 0.2s infinite;
}
.sp-game-card:hover .sp-game-btn::after,
.sp-game-card:hover .sp-game-btn .overlay { opacity: 1; }
.sp-game-card:hover .sp-game-btn .particle { opacity: 0.8; }
.sp-game-card:hover .sp-game-btn > span:first-child {
  animation: sp-btn-glitch 0.3s linear infinite, sp-btn-claw 1s infinite;
}

@keyframes sp-btn-scan {
  0%   { transform: translateX(-100%) skewX(15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}
@keyframes sp-btn-glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(-2px, -3px); }
  60%  { transform: translate(3px, 1px); }
  80%  { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
@keyframes sp-btn-spot-shift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(5px, -5px); }
  100% { transform: translate(0, 0); }
}
@keyframes sp-btn-pulse {
  0%   { transform: scale(0.9); opacity: 0; }
  50%  { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(0.9); opacity: 0; }
}
@keyframes sp-btn-pounce {
  0%   { transform: translateY(-5px) scale(1.05); }
  50%  { transform: translateY(-7px) scale(1.06); }
  100% { transform: translateY(-5px) scale(1.05); }
}
@keyframes sp-btn-claw {
  0%   { opacity: 1; }
  15%  { opacity: 0.8; transform: skewX(5deg); }
  30%  { opacity: 1; transform: skewX(-5deg); }
  45%  { opacity: 0.7; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes sp-btn-border-leap {
  0%   { transform: scale(1) translateX(10%); }
  40%  { transform: scale(1) translateX(20%); }
  60%  { transform: scale(1) translateX(35%); }
  100% { transform: scale(1) translateX(100%); }
}
@keyframes sp-particle-1 {
  0%   { transform: translate(0, 0); opacity: 0.8; }
  50%  { transform: translate(12px, -8px); opacity: 0.4; }
  100% { transform: translate(-6px, 4px); opacity: 0.8; }
}
@keyframes sp-particle-2 {
  0%   { transform: translate(0, 0); opacity: 0.8; }
  50%  { transform: translate(-10px, 6px); opacity: 0.5; }
  100% { transform: translate(5px, -12px); opacity: 0.8; }
}
@keyframes sp-particle-3 {
  0%   { transform: translate(0, 0); opacity: 0.8; }
  50%  { transform: translate(7px, 10px); opacity: 0.6; }
  100% { transform: translate(-7px, -5px); opacity: 0.8; }
}
@keyframes sp-particle-4 {
  0%   { transform: translate(0, 0); opacity: 0.8; }
  50%  { transform: translate(-12px, -10px); opacity: 0.4; }
  100% { transform: translate(6px, 8px); opacity: 0.8; }
}
@keyframes sp-particle-5 {
  0%   { transform: translate(0, 0); opacity: 0.8; }
  50%  { transform: translate(10px, -7px); opacity: 0.5; }
  100% { transform: translate(-5px, 6px); opacity: 0.8; }
}

@media (max-width: 480px) {
  .sp-game-btn { font-size: 14px; padding: 10px 18px !important; max-width: 200px; }
}

/* ============================================================ */
/* v30: NAV LOGIN BUTTON Uiverse-vinh_8995 join-button          */
/* Orange/Yellow/Gold dengan login icon                         */
/* Structure: .fold + .points_wrapper (10 points) + .inner-btn  */
/* ============================================================ */
.sp-login-btn {
  --h-button: 42px;
  --round: 0.7rem;
  cursor: pointer;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  transition: all 0.25s ease !important;
  background:
    radial-gradient(65.28% 65.28% at 50% 100%,
      rgba(40, 20, 5, 0.8) 0%,
      rgba(255, 204, 0, 0) 100%),
    linear-gradient(0deg, #ff9500, #ffc107) !important;
  border-radius: var(--round) !important;
  border: none !important;
  outline: none;
  padding: 10px 20px !important;
  height: var(--h-button);
  color: #fff !important;
  font-weight: 700;
}

/* Border effects */
.sp-login-btn::before,
.sp-login-btn::after {
  content: "";
  position: absolute;
  inset: var(--space);
  transition: all 0.5s ease-in-out;
  border-radius: calc(var(--round) - var(--space));
  z-index: 0;
}
.sp-login-btn::before {
  --space: 1px;
  background: linear-gradient(177.95deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0) 100%);
}
.sp-login-btn::after {
  --space: 2px;
  background:
    radial-gradient(65.28% 65.28% at 50% 100%,
      rgba(40, 20, 0, 0.7) 0%,
      rgba(255, 204, 0, 0) 100%),
    linear-gradient(0deg, #ffaa00, #d4af37);
}
.sp-login-btn:active { transform: scale(0.95); }

/* Folding corner effect */
.sp-login-btn .fold {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  height: 1rem;
  width: 1rem;
  display: inline-block;
  transition: all 0.5s ease-in-out;
  background: radial-gradient(100% 75% at 55%,
    rgba(255, 215, 100, 0.8) 0%,
    rgba(255, 204, 0, 0) 100%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 0.5rem;
  border-top-right-radius: var(--round);
}
.sp-login-btn .fold::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150%;
  height: 150%;
  transform: rotate(45deg) translateX(0%) translateY(-18px);
  background-color: #e8e8e8;
  pointer-events: none;
}
.sp-login-btn:hover .fold {
  margin-top: -1rem;
  margin-right: -1rem;
}

/* Floating points animation */
.sp-login-btn .points_wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}
.sp-login-btn .point {
  bottom: -10px;
  position: absolute;
  animation: sp-login-floating infinite ease-in-out;
  pointer-events: none;
  width: 2px;
  height: 2px;
  background-color: #fff;
  border-radius: 9999px;
}
@keyframes sp-login-floating {
  0%   { transform: translateY(0); }
  85%  { opacity: 0; }
  100% { transform: translateY(-55px); opacity: 0; }
}
.sp-login-btn .point:nth-child(1) { left: 10%; animation-duration: 2.35s; animation-delay: 0.2s; }
.sp-login-btn .point:nth-child(2) { left: 30%; animation-duration: 2.5s;  animation-delay: 0.5s; opacity: 0.7; }
.sp-login-btn .point:nth-child(3) { left: 25%; animation-duration: 2.2s;  animation-delay: 0.1s; opacity: 0.8; }
.sp-login-btn .point:nth-child(4) { left: 44%; animation-duration: 2.05s;                       opacity: 0.6; }
.sp-login-btn .point:nth-child(5) { left: 50%; animation-duration: 1.9s; }
.sp-login-btn .point:nth-child(6) { left: 75%; animation-duration: 1.5s;  animation-delay: 1.5s; opacity: 0.5; }
.sp-login-btn .point:nth-child(7) { left: 88%; animation-duration: 2.2s;  animation-delay: 0.2s; opacity: 0.9; }
.sp-login-btn .point:nth-child(8) { left: 58%; animation-duration: 2.25s; animation-delay: 0.2s; opacity: 0.8; }
.sp-login-btn .point:nth-child(9) { left: 98%; animation-duration: 2.6s;  animation-delay: 0.1s; opacity: 0.6; }
.sp-login-btn .point:nth-child(10){ left: 65%; animation-duration: 2.5s;  animation-delay: 0.2s; }

/* Inner content + icon */
.sp-login-btn .inner-btn {
  z-index: 2;
  gap: 8px;
  position: relative;
  width: 100%;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  font-family: 'Poppins', 'Inter', sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.sp-login-btn .inner-btn svg.icon {
  width: 16px;
  height: 16px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  fill: currentColor;
}
.sp-login-btn:hover svg.icon {
  transform: scale(1.25) translateX(2px);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

@media (max-width: 480px) {
  /* v31: Mobile sizing untuk login button animasi (TANPA hide span — biar animasi tetap jalan) */
  .sp-login-btn .inner-btn { font-size: 12px; }
}

/* ============================================================ */
/* v31: SPINSHOP SUB-MENU FLOATING CIRCLES (kanan atas)         */
/* Tampil di semua halaman /spinshop/ untuk navigasi cepat ke    */
/* cara-main, daftar-hadiah, pemenang, faq.                      */
/* Posisi di bawah nav header — TIDAK menutupi header.           */
/* ============================================================ */
.sp-shop-floats{
  position: fixed;
  top: 78px;            /* tepat di bawah nav (66px) + 12px breathing */
  right: 12px;
  z-index: 998;         /* di bawah nav (1000), di atas konten */
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sp-shop-float-btn{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 14, 6, 0.85);
  border: 2px solid rgba(245, 200, 66, 0.45);
  color: #f0c040;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  transition: transform .2s, border-color .2s, background .2s, color .2s, box-shadow .2s;
  line-height: 1;
}
.sp-shop-float-btn:hover{
  background: linear-gradient(135deg, #f5d77e, #d4af37);
  color: #2a1900;
  border-color: #f0c040;
  transform: translateX(-3px) scale(1.08);
  box-shadow: 0 6px 18px rgba(245, 200, 66, 0.45);
}
.sp-shop-float-btn.active{
  background: linear-gradient(135deg, #d4af37, #f0c040);
  color: #2a1900;
  border-color: #fff5b3;
  box-shadow: 0 0 0 2px rgba(245, 200, 66, 0.25), 0 4px 14px rgba(245, 200, 66, 0.45);
}
.sp-shop-float-btn .lbl{
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 14, 6, 0.96);
  color: #f0c040;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  border: 1px solid rgba(245, 200, 66, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sp-shop-float-btn:hover .lbl{
  opacity: 1;
  transform: translateY(-50%) translateX(-2px);
}
/* Tablet & mobile: lebih kecil + lebih dekat ke pojok */
@media (max-width: 768px){
  .sp-shop-floats{
    top: 72px;
    right: 8px;
    gap: 7px;
  }
  .sp-shop-float-btn{
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-width: 1.5px;
  }
  .sp-shop-float-btn .lbl{
    font-size: 10px;
    padding: 4px 8px;
  }
}
@media (max-width: 480px){
  .sp-shop-floats{
    top: 66px;            /* tepat di bawah nav mobile (60px) + 6px */
    right: 6px;
    gap: 6px;
  }
  .sp-shop-float-btn{
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  /* Mobile: tooltip nonaktif (kurang berguna saat tap) */
  .sp-shop-float-btn .lbl{ display: none; }
}

/* ============================================================ */
/* v36: WINNERS-CARD RESPONSIVE POSITION                        */
/* Desktop (>1100px): pemenang terbaru di kanan, di ATAS sistem  */
/*                    coupon (side-col).                         */
/* Mobile  (<=1100px): pemenang terbaru di main-col, di ATAS     */
/*                     shop-section (TUKAR DI TOKO).             */
/* ============================================================ */

/* Default DESKTOP — show desktop wrap, hide mobile wrap */
.winners-desktop-wrap { display: block; margin-bottom: 18px; }
.winners-mobile-wrap  { display: none; }

/* Mobile — flip */
@media (max-width: 1100px){
  .winners-desktop-wrap { display: none; }
  .winners-mobile-wrap  { display: block; }
}