/* =============================================
   IDNCASH LUCKYSPIN — style5.css
   Full layout + screen styles
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background: #0a0614 url('/assets/spin2/bg-desktop.webp') center center / cover no-repeat fixed;
  font-family: 'Rajdhani', sans-serif;
  color: #e0d8f0;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 768px) {
  body {
    background-image: url('/assets/spin2/bg-mobile.webp');
  }
}

/* ===== HIDDEN ===== */
.hidden { display: none !important; }

/* ===== SCREEN ===== */
.screen {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ===== LOGIN LAYOUT ===== */
.login-layout {
  width: 100%;
  max-width: 520px;
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Banner slim */
.banner-slim {
  width: 100%;
  background: linear-gradient(135deg, rgb(200 150 12 / 41%), rgb(171 134 0 / 58%));
  border: 1px solid rgba(200,150,12,0.25);
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
}
.b-stars  { color: #c8960c; font-size: 14px; letter-spacing: 6px; }
.b-title  { font-size: 13px; color: #ffffff; margin: 6px 0 4px; line-height: 1.4; }
.b-brand  { color: #f0c040; font-family: 'Orbitron', sans-serif; font-size: 14px; }
.b-desc   { font-size: 12px; color: #ffffff; line-height: 1.4; }

/* Form slim */
.form-slim {
  width: 100%;
  background: rgba(10,6,30,0.7);
  border: 1px solid rgba(200,150,12,0.2);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(8px);
}
.fi-group { display: flex; flex-direction: column; gap: 6px; }
.fi-group label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  color: #c8960c;
  letter-spacing: 1px;
}
.fi-group input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,150,12,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  color: #e0d8f0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.fi-group input:focus { border-color: rgba(200,150,12,0.6); }
.fi-error { color: #f87171; font-size: 13px; min-height: 16px; }

/* Login button */
.btn-masuk {
  background: linear-gradient(135deg, #c8960c, #f0c040);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1a0a0e;
  cursor: pointer;
  width: 100%;
  transition: all .2s;
  box-shadow: 0 4px 20px rgba(200,150,12,0.3);
}
.btn-masuk:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,150,12,0.45); }
.btn-masuk:active { transform: translateY(0); }

/* ===== INFO BUTTON ===== */
.info-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(200,150,12,0.15);
  border: 1px solid rgba(200,150,12,0.4);
  color: #f0c040;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  z-index: 100;
  transition: all .2s;
}
.info-btn:hover { background: rgba(200,150,12,0.3); }

/* ===== MODAL S&K ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-box {
  background: linear-gradient(145deg, #150820, #0a1428);
  border: 1px solid rgba(200,150,12,0.3);
  border-radius: 16px;
  padding: 28px 24px;
  width: min(500px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: 1px solid rgba(200,150,12,.4);
  color: #f0c040; font-size: 18px;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
}
.modal-title { font-family: 'Orbitron', sans-serif; font-size: 15px; color: #f0c040; margin-bottom: 16px; }
.modal-content p { font-size: 13px; color: #ffffff; line-height: 1.6; margin-bottom: 10px; }

/* ===== GAME LAYOUT ===== */
.game-layout {
  width: 100%;
  max-width: 560px;
  padding: 12px 14px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Game header */
.game-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(10,6,30,0.65);
  border: 1px solid rgba(200,150,12,0.2);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.gh-player { display: flex; align-items: center; gap: 8px; }
.gh-lbl    { font-size: 11px; color: #9a8870; font-family: 'Orbitron', sans-serif; }
.gh-name   { font-family: 'Orbitron', sans-serif; font-size: 13px; color: #f0c040; font-weight: 700; }

/* Logout button */
.btn-logout {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  color: #a0a0a0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.btn-logout:hover { background: rgba(255,80,80,0.12); border-color: rgba(255,80,80,0.35); color: #f87171; }

/* ===== SPIN ACTION ===== */
.spin-action { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }

.btn-spin {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #c8960c, #f0c040, #c8960c);
  background-size: 200% 100%;
  border: none;
  border-radius: 50px;
  padding: 14px 48px;
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: #1a0a0e;
  cursor: pointer;
  transition: all .3s;
  box-shadow: 0 6px 28px rgba(200,150,12,0.4);
  letter-spacing: 2px;
}
.btn-spin:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(200,150,12,0.55); background-position: right center; }
.btn-spin:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.bs-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: shineAnim 2.5s infinite;
}
@keyframes shineAnim {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}

.spin-status {
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  color: #9a90bb;
  text-align: center;
}

/* ===== COLLECTION BOX ===== */
.coll-box {
  width: 100%;
  background: rgba(10,6,30,0.65);
  border: 1px solid rgba(200,150,12,0.2);
  border-radius: 16px;
  padding: 16px 14px;
  backdrop-filter: blur(6px);
}
.coll-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  color: #c8960c;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 14px;
}
.coll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 420px) {
  .coll-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Collection item */
.ci {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0.45;
  transition: all .2s;
}
.ci.owned {
  opacity: 1;
  border-color: rgba(200,150,12,0.4);
  background: rgba(200,150,12,0.07);
  box-shadow: 0 0 12px rgba(200,150,12,0.1);
}
.ci img    { width: 52px; height: 52px; object-fit: contain; }
.ci-name   { font-size: 10px; color: #c0b090; text-align: center; line-height: 1.2; font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.ci-cnt    { font-family: 'Orbitron', sans-serif; font-size: 11px; color: #f0c040; }

/* ===== WIN OVERLAY ===== */
.win-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
}
.win-box {
  position: relative;
  background: linear-gradient(145deg, #1a0a30, #0a1a3a);
  border: 2px solid #c8960c;
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  width: min(360px, 90vw);
  box-shadow: 0 0 60px rgba(200,150,12,0.4);
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.win-sparks { font-size: 22px; letter-spacing: 8px; margin: 6px 0; }
.win-title  { font-family: 'Orbitron', sans-serif; font-size: 22px; color: #f0c040; margin: 10px 0 6px; text-shadow: 0 0 20px rgba(240,192,64,0.6); }
.win-sub    { color: #9a8870; font-size: 13px; margin-bottom: 16px; }
.win-item   { margin: 10px 0 16px; }
.win-item img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(200,150,12,0.6)); }
.win-name   { font-family: 'Orbitron', sans-serif; font-size: 14px; color: #f0c040; margin-top: 10px; }
.btn-klaim  {
  background: linear-gradient(135deg, #c8960c, #f0c040);
  border: none; border-radius: 50px;
  padding: 12px 36px;
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700;
  color: #1a0a0e; cursor: pointer;
  box-shadow: 0 4px 20px rgba(200,150,12,0.4);
  transition: all .2s;
}
.btn-klaim:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,150,12,0.55); }

/* ===== SPIN ANIMATION (items-ring) ===== */
/* slowSpin dikelola via JavaScript agar tidak konflik dengan sistem spin backend */
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* =============================================
   FIX: btn-market — area klik penuh, tidak ada pointer-events issue
   ============================================= */
.btn-market {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: all !important;
  cursor: pointer !important;
  position: relative;
  z-index: 10;
  /* Override gaya lama sepenuhnya */
  background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%) !important;
  border: 1px solid rgba(16,185,129,0.5) !important;
  color: #fff !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  transition: all .25s !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3) !important;
  letter-spacing: 0.5px !important;
}
.btn-market:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(16,185,129,0.5) !important;
}
.btn-market * { pointer-events: none; }

/* =============================================
   BUTTON REDESIGN
   ============================================= */
.btn-masuk {
  background: linear-gradient(135deg, #b8840a 0%, #f0c040 40%, #f5d060 60%, #c8960c 100%);
  background-size: 200% 200%;
  border: none; border-radius: 14px; padding: 14px 24px;
  font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 900;
  color: #1a0800; cursor: pointer; width: 100%; transition: all .3s;
  box-shadow: 0 6px 24px rgba(200,150,12,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
  letter-spacing: 2px; position: relative; overflow: hidden; text-transform: uppercase;
}
.btn-masuk::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  transform:skewX(-20deg); animation:masukShine 2.5s infinite;
}
@keyframes masukShine { 0%{left:-100%} 50%{left:150%} 100%{left:150%} }
.btn-masuk:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(200,150,12,0.6); }
.btn-masuk:active { transform:translateY(-1px); }

.btn-spin {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1a0050 0%,#6d28d9 30%,#8b5cf6 50%,#6d28d9 70%,#1a0050 100%);
  background-size:300% 300%;
  border:2px solid rgba(139,92,246,0.6); border-radius:50px; padding:16px 56px;
  font-family:'Orbitron',sans-serif; font-size:16px; font-weight:900; color:#fff;
  cursor:pointer; transition:all .3s; letter-spacing:3px; text-transform:uppercase;
  animation:spinBtnPulse 2.5s ease-in-out infinite;
  box-shadow:0 8px 32px rgba(109,40,217,0.5);
}
@keyframes spinBtnPulse {
  0%,100%{box-shadow:0 8px 32px rgba(109,40,217,.5),0 0 0 0 rgba(139,92,246,.4);}
  50%{box-shadow:0 8px 32px rgba(109,40,217,.6),0 0 0 10px rgba(139,92,246,0);}
}
.btn-spin:not(:disabled):hover { transform:translateY(-4px) scale(1.03); box-shadow:0 16px 48px rgba(109,40,217,0.7); }
.btn-spin:disabled {
  opacity:.4; cursor:not-allowed; animation:none; box-shadow:none;
  background:linear-gradient(135deg,#2d2d2d,#4a4a4a);
  border-color:rgba(255,255,255,0.1); color:#888;
}
.bs-shine {
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-20deg); animation:shineAnim 2.5s infinite;
}
@keyframes shineAnim{0%{left:-100%}50%{left:150%}100%{left:150%}}

.btn-logout {
  background:linear-gradient(135deg,rgba(239,68,68,0.12),rgba(239,68,68,0.05));
  border:1px solid rgba(239,68,68,0.35); color:#f87171;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px;
  padding:8px 16px; border-radius:10px; cursor:pointer; transition:all .25s;
}
.btn-logout:hover { background:rgba(239,68,68,0.2); border-color:rgba(239,68,68,0.6); color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(239,68,68,0.3); }

.btn-klaim {
  background:linear-gradient(135deg,#b8840a,#f0c040,#f5d060,#c8960c);
  background-size:200%; border:none; border-radius:50px; padding:14px 44px;
  font-family:'Orbitron',sans-serif; font-size:14px; font-weight:900;
  color:#1a0800; cursor:pointer; letter-spacing:2px;
  box-shadow:0 6px 28px rgba(200,150,12,0.5); transition:all .3s;
  text-transform:uppercase; position:relative; overflow:hidden;
}
.btn-klaim::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);
  transform:skewX(-20deg); animation:masukShine 1.8s infinite;
}
.btn-klaim:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(200,150,12,0.65); }

.btn-redeem-recipe {
  background:linear-gradient(135deg,#c8960c,#f0c040); border:none; color:#1a0a0e;
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700;
  padding:9px 16px; border-radius:10px; cursor:pointer; transition:all .2s; white-space:nowrap;
  box-shadow:0 3px 10px rgba(200,150,12,0.3);
}
.btn-redeem-recipe:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px rgba(200,150,12,0.5);}
.btn-redeem-recipe:disabled{opacity:.3;cursor:not-allowed;}

.btn-confirm-yes {
  background:linear-gradient(135deg,#064e3b,#059669,#10b981); border:none; color:#fff;
  font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700;
  padding:12px 26px; border-radius:10px; cursor:pointer;
  box-shadow:0 4px 16px rgba(16,185,129,0.4); letter-spacing:.5px; transition:all .2s;
}
.btn-confirm-yes:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,0.6);}

/* =============================================
   PARTIKEL CAHAYA ZIG-ZAG — Item 7, 8, 9
   Semua tampilan: wheel item, koleksi, win popup, market
   ============================================= */

/* Container wrapper untuk partikel — dipakai di semua konteks */
.premium-wrap {
  position: relative;
  display: inline-block;
}

/* Item di dalam koleksi grid yang premium */
.ci-premium-7 { border-color: #60a5fa !important; box-shadow: 0 0 40px rgba(96, 165, 250, 0.45), 0 0 80px rgba(96, 165, 250, 0.2) !important; }
.ci-premium-8 { border-color: #a855f7 !important; box-shadow: 0 0 60px rgba(168, 85, 247, 0.7), 0 0 120px rgba(168, 85, 247, 0.35), inset 0 0 40px rgba(168, 85, 247, 0.15) !important; }
.ci-premium-9 { border-color: #ef4444 !important; background: linear-gradient(145deg, #2d0a0a, #1a0a00) !important; box-shadow: 0 0 80px rgba(239, 68, 68, 0.8), 0 0 160px rgba(239, 68, 68, 0.4), inset 0 0 60px rgba(239, 68, 68, 0.15) !important; }

/* Pastikan premium-wrap di koleksi tidak merusak layout */
.ci .premium-wrap {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ci .premium-wrap img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  animation: skyFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(96, 165, 250, 0.8)) drop-shadow(0 0 36px rgba(96, 165, 250, 0.4)) !important;
}

/* Partikel cahaya zig-zag naik — diterapkan via JS ke semua img item premium */
.particle-aura {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  overflow: visible;
}
.particle-aura span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  opacity: 0;
  animation: particleRise var(--dur, 2.2s) var(--delay, 0s) ease-in infinite;
}

/* Warna partikel per item */
.aura-7 span { background: radial-gradient(circle, #93c5fd, #60a5fa); box-shadow: 0 0 6px #60a5fa; }
.aura-8 span { background: radial-gradient(circle, #e9d5ff, #a855f7); box-shadow: 0 0 6px #a855f7; }
.aura-9 span { background: radial-gradient(circle, #fca5a5, #ef4444); box-shadow: 0 0 6px #ef4444; }

/* Animasi naik zig-zag:
   translateX zig-zag dengan sin wave, translateY naik ke atas, opacity fade */
@keyframes particleRise {
  0%   { opacity:0; transform: translate(var(--sx,0px), 0) scale(0.5); }
  15%  { opacity:1; }
  30%  { transform: translate(calc(var(--sx,0px) * -1.5), -30%) scale(1); }
  50%  { transform: translate(calc(var(--sx,0px) * 0.8), -55%) scale(0.9); }
  70%  { transform: translate(calc(var(--sx,0px) * -0.5), -75%) scale(0.7); opacity:0.6; }
  90%  { opacity:0.1; transform: translate(calc(var(--sx,0px) * 0.3), -90%) scale(0.4); }
  100% { opacity:0; transform: translate(0, -100%) scale(0.1); }
}

/* =============================================
   WIN POPUP EFFECTS — item 7, 8, 9
   ============================================= */
.win-effect-sky {
  border-color: #60a5fa !important;
  box-shadow: 0 0 40px rgba(96,165,250,0.45), 0 0 80px rgba(96,165,250,0.2) !important;
}
.win-effect-sky .win-title { color:#93c5fd; text-shadow:0 0 20px rgba(147,197,253,0.7); }
.win-img-sky { animation:skyFloat 2s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(96,165,250,0.8)) drop-shadow(0 0 36px rgba(96,165,250,0.4)) !important; }
@keyframes skyFloat { 0%,100%{transform:translateY(0) scale(1);}  50%{transform:translateY(-8px) scale(1.04);} }

.win-effect-gem {
  border-color: #a855f7 !important;
  box-shadow: 0 0 60px rgba(168,85,247,0.7), 0 0 120px rgba(168,85,247,0.35), inset 0 0 40px rgba(168,85,247,0.15) !important;
  animation: gemPulse 1.5s ease-in-out infinite !important;
}
@keyframes gemPulse {
  0%,100%{box-shadow:0 0 60px rgba(168,85,247,.7),0 0 120px rgba(168,85,247,.35),inset 0 0 40px rgba(168,85,247,.15);}
  50%{box-shadow:0 0 80px rgba(168,85,247,.9),0 0 160px rgba(168,85,247,.5),inset 0 0 60px rgba(168,85,247,.25);}
}
.win-effect-gem .win-title { color:#d8b4fe; animation:gemTitleShimmer 1.5s ease-in-out infinite; }
@keyframes gemTitleShimmer {
  0%,100%{text-shadow:0 0 30px rgba(216,180,254,.9),0 0 60px rgba(168,85,247,.6);}
  50%{text-shadow:0 0 50px #fff,0 0 80px rgba(216,180,254,.9),0 0 120px rgba(168,85,247,.7);}
}
.win-img-gem { animation: skyFloat 2s ease-in-out infinite; }

.win-effect-gem::before { content:'💎 ✨ 💜 ✨ 💎'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:18px; letter-spacing:4px; animation:gemParticle 1s ease-in-out infinite; }
@keyframes gemParticle { 0%,100%{opacity:.7;transform:translateX(-50%) translateY(0);} 50%{opacity:1;transform:translateX(-50%) translateY(-6px);} }

.win-effect-dragon {
  border-color: #ef4444 !important;
  background: linear-gradient(145deg, #2d0a0a, #1a0a00) !important;
  box-shadow: 0 0 80px rgba(239,68,68,0.8),0 0 160px rgba(239,68,68,0.4),inset 0 0 60px rgba(239,68,68,0.15) !important;
  animation: dragonRage .8s ease-in-out infinite !important;
}
@keyframes dragonRage {
  0%,100%{border-color:#ef4444;box-shadow:0 0 80px rgba(239,68,68,.8),0 0 160px rgba(239,68,68,.4);}
  33%{border-color:#fb923c;box-shadow:0 0 100px rgba(251,146,60,.9),0 0 200px rgba(251,146,60,.5);}
  66%{border-color:#fde047;box-shadow:0 0 90px rgba(253,224,71,.8),0 0 180px rgba(253,224,71,.4);}
}
.win-effect-dragon .win-title { color:#fca5a5; animation:dragonFire .6s ease-in-out infinite; }
@keyframes dragonFire {
  0%,100%{color:#fca5a5;text-shadow:0 0 20px rgba(239,68,68,1),0 0 40px rgba(239,68,68,.8);}
  50%{color:#fde047;text-shadow:0 0 40px rgba(253,224,71,1),0 0 80px rgba(251,146,60,1);}
}
.win-img-dragon { animation:dragonFloat 1.2s ease-in-out infinite,dragonAura .8s ease-in-out infinite; }
@keyframes dragonFloat { 0%,100%{transform:translateY(0) scale(1.05) rotate(-2deg);} 50%{transform:translateY(-12px) scale(1.12) rotate(2deg);} }
@keyframes dragonAura {
  0%,100%{filter:drop-shadow(0 0 30px rgba(239,68,68,1)) drop-shadow(0 0 60px rgba(239,68,68,.8)) brightness(1.3);}
  33%{filter:drop-shadow(0 0 40px rgba(251,146,60,1)) drop-shadow(0 0 80px rgba(251,146,60,.9)) brightness(1.4);}
  66%{filter:drop-shadow(0 0 35px rgba(253,224,71,1)) drop-shadow(0 0 70px rgba(253,224,71,.8)) brightness(1.5);}
}
.win-effect-dragon::before { content:'🔥 🐉 🔥 🐉 🔥'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:16px; letter-spacing:4px; animation:dragonFirePt .5s ease-in-out infinite; }
@keyframes dragonFirePt { 0%,100%{opacity:.8;transform:translateX(-50%) translateY(0) scale(1);} 50%{opacity:1;transform:translateX(-50%) translateY(-8px) scale(1.1);} }

/* =============================================
   PROGRESS BAR — Monthly Jackpot Progress
   ============================================= */
.progress-bar-section {
  width: 100%;
  background: linear-gradient(145deg, rgba(10,6,30,0.85), rgba(15,10,40,0.9));
  border: 1px solid rgba(200,150,12,0.3);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(200,150,12,0.1);
}
.pb-header { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.pb-title-row { display:flex; align-items:center; justify-content:space-between; }
.pb-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #f0c040;
  letter-spacing: 0.5px;
}
.pb-month {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: #9a8870;
  background: rgba(200,150,12,0.1);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(200,150,12,0.2);
}
.pb-points-row { display:flex; align-items:center; gap:8px; }
.pb-points {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}
.pb-points-max { font-size: 11px; color: #9a8870; font-weight: 400; }
.pb-full-badge {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1a0a00;
  background: linear-gradient(135deg, #f0c040, #c8960c);
  padding: 2px 10px;
  border-radius: 20px;
  animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(240,192,64,.5);} 50%{box-shadow:0 0 0 6px rgba(240,192,64,0);} }

.pb-track-wrap { position: relative; margin-bottom: 6px; }
.pb-track {
  width: 100%;
  height: 18px;
  background: rgba(255,255,255,0.07);
  border-radius: 20px;
  border: 1px solid rgba(200,150,12,0.2);
  position: relative;
  overflow: visible;
}
.pb-fill {
  height: 100%;
  background: linear-gradient(90deg, #b8840a, #f0c040, #ffe066);
  border-radius: 20px;
  position: relative;
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
  min-width: 0%;
  box-shadow: 0 0 12px rgba(240,192,64,0.5);
}
.pb-fill-shine {
  position: absolute;
  top: 2px; left: 8px; right: 8px; height: 5px;
  background: rgba(255,255,255,0.35);
  border-radius: 10px;
}
.pb-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2;
}
.pb-ms-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(200,150,12,0.4);
  transition: all 0.4s;
}
.pb-milestone.reached .pb-ms-dot {
  background: #f0c040;
  border-color: #f0c040;
  box-shadow: 0 0 8px rgba(240,192,64,0.8);
}
.pb-ms-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  color: #9a8870;
  position: absolute;
  top: 14px;
  white-space: nowrap;
}
.pb-milestone.reached .pb-ms-label { color: #f0c040; }

.pb-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.pb-info-txt {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  color: #ffffff;
}
.pb-reset-txt {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  color: #ffffff;
  text-align: right;
}
.pb-jackpot-banner {
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(200,150,12,0.2), rgba(240,192,64,0.1));
  border: 1px solid rgba(200,150,12,0.4);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: #f0c040;
  text-align: center;
  font-weight: 700;
  animation: bannerPulse 2s ease-in-out infinite;
}
@keyframes bannerPulse { 0%,100%{opacity:1;} 50%{opacity:0.75;} }

/* =============================================
   MYSTERY BOX SECTION (below collection)
   ============================================= */
.mystery-box-section {
  width: 100%;
  background: linear-gradient(145deg, rgba(20,5,40,0.85), rgba(10,10,30,0.9));
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(168,85,247,0.1), inset 0 1px 0 rgba(168,85,247,0.1);
}
.mb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mb-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #d8b4fe;
  letter-spacing: 0.5px;
}
.mb-subtitle {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: #9a8870;
  background: rgba(168,85,247,0.1);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(168,85,247,0.2);
}
.mb-chest-area {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.mb-chest {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: radial-gradient(circle at 40% 40%, rgba(168,85,247,0.3), rgba(10,5,20,0.9));
  border: 2px solid rgba(168,85,247,0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: chestFloat 3s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(168,85,247,0.3);
}
.chest-img { font-size: 28px; }
.chest-glow {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(168,85,247,0.2);
  animation: chestGlow 2s ease-in-out infinite;
}
@keyframes chestFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
@keyframes chestGlow { 0%,100%{box-shadow:0 0 8px rgba(168,85,247,0.3);} 50%{box-shadow:0 0 18px rgba(168,85,247,0.6);} }

.mb-desc {
  flex: 1;
}
.mb-desc p {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: #9a8870;
  line-height: 1.5;
  margin-bottom: 6px;
}
.mb-desc strong { color: #d8b4fe; }
.mb-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mb-list li {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  color: #7c6a90;
}
.mb-list li b { color: #c4a8e0; }

.mb-status-active {
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(139,92,246,0.1));
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  color: #d8b4fe;
  font-weight: 700;
  animation: statusPulse 2s ease-in-out infinite;
}
.mb-status-active.booster {
  background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(16,185,129,0.1));
  border-color: rgba(52,211,153,0.4);
  color: #6ee7b7;
}
@keyframes statusPulse { 0%,100%{opacity:1;} 50%{opacity:0.8;} }

/* =============================================
   MYSTERY BOX POPUP OVERLAY
   ============================================= */
.mystery-box-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 2500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.mystery-box-overlay.active {
  opacity: 1; pointer-events: all;
}
.mb-popup-box {
  position: relative;
  background: linear-gradient(145deg, #1a0535, #0d1a3a);
  border: 2px solid #a855f7;
  border-radius: 22px;
  padding: 28px 24px;
  width: min(380px, 92vw);
  text-align: center;
  box-shadow: 0 0 80px rgba(168,85,247,0.5), inset 0 0 60px rgba(168,85,247,0.05);
  animation: mbPopIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
  overflow: hidden;
}
@keyframes mbPopIn { from{transform:scale(0.6) rotate(-5deg);opacity:0;} to{transform:scale(1) rotate(0deg);opacity:1;} }

.mb-popup-glow {
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.12), transparent 70%);
  animation: mbGlowRotate 4s linear infinite;
  pointer-events: none;
}
@keyframes mbGlowRotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.mb-popup-header { margin-bottom: 12px; }
.mb-popup-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #1a0535;
  background: linear-gradient(135deg, #a855f7, #d8b4fe);
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 1px;
}
.mb-popup-chest {
  font-size: 56px;
  margin: 8px 0;
  animation: chestBounce 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes chestBounce { from{transform:scale(0.5);opacity:0;} to{transform:scale(1);opacity:1;} }
.mb-popup-chest .chest-sparkles {
  font-size: 18px;
  letter-spacing: 6px;
  animation: sparkleAnim 1s ease-in-out infinite;
}
@keyframes sparkleAnim { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.6;transform:scale(1.1);} }

.mb-popup-icon {
  font-size: 40px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 12px rgba(168,85,247,0.8));
}
.mb-popup-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #d8b4fe;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(168,85,247,0.7);
}
.mb-popup-desc {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: #9a8870;
  margin-bottom: 12px;
}
.mb-popup-extra {
  margin: 8px 0 14px;
  min-height: 28px;
}
.mb-bonus-item {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 10px; padding: 8px 14px;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; color: #d8b4fe; font-weight: 700;
}
.mb-bonus-item img { width: 36px; height: 36px; object-fit: contain; }
.mb-bonus-point, .mb-bonus-multi, .mb-bonus-booster {
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 10px; padding: 8px 14px;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; color: #d8b4fe; font-weight: 700;
}
.mb-popup-close {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #c084fc);
  border: none; border-radius: 50px;
  padding: 12px 36px;
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700;
  color: #fff; cursor: pointer;
  box-shadow: 0 4px 20px rgba(168,85,247,0.5);
  transition: all 0.2s;
  letter-spacing: 1px;
}
.mb-popup-close:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(168,85,247,0.7); }

/* =============================================
   MARKET — Improved recipe cards & SnK
   ============================================= */
.recipe-card {
  position: relative;
  padding-top: 30px !important;
}
.recipe-tier-badge {
  position: absolute;
  top: 8px; left: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.tier-basic     { background: rgba(96,165,250,0.15); color: #93c5fd; border: 1px solid rgba(96,165,250,0.3); }
.tier-menengah  { background: rgba(251,191,36,0.15); color: #fde68a; border: 1px solid rgba(251,191,36,0.3); }
.tier-advance   { background: rgba(251,146,60,0.15); color: #fdba74; border: 1px solid rgba(251,146,60,0.3); }
.tier-elite     { background: rgba(168,85,247,0.15); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.3); }
.tier-jackpot   { background: rgba(240,192,64,0.2);  color: #f0c040; border: 1px solid rgba(240,192,64,0.4); }
.tier-endgame   { background: rgba(239,68,68,0.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }

.recipe-card.recipe-can-afford {
  border-color: rgba(74,222,128,0.35) !important;
  box-shadow: 0 0 16px rgba(74,222,128,0.1) !important;
}
.recipe-can-afford .btn-redeem-recipe {
  animation: redeemPulse 2s ease-in-out infinite;
}
@keyframes redeemPulse {
  0%,100%{box-shadow:0 3px 10px rgba(200,150,12,0.3);}
  50%{box-shadow:0 3px 18px rgba(200,150,12,0.6);}
}
.ri-enough { border-color: rgba(74,222,128,0.3) !important; }
.ri-lack   { border-color: rgba(239,68,68,0.35) !important; }

.recipe-reward {
  font-size: 16px !important;
  font-weight: 900 !important;
}
.recipe-status { font-size: 12px !important; }

.market-multiplier-notice {
  background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(139,92,246,0.1));
  border: 1px solid rgba(168,85,247,0.5);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: #d8b4fe;
  font-weight: 600;
  text-align: center;
  animation: statusPulse 2s ease-in-out infinite;
}

.market-snk {
  margin-top: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,150,12,0.2);
  border-left: 3px solid #c8960c;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
}
.snk-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  color: #f0c040;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.snk-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.snk-list li {
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  color: #b0a090;
}
.snk-list li b { color: #f0c040; }

/* =============================================
   S&K Modal extra sections
   ============================================= */
.snk-extra {
  margin-top: 14px;
  padding: 12px;
  background: rgba(200,150,12,0.05);
  border: 1px solid rgba(200,150,12,0.15);
  border-radius: 10px;
}
.snk-extra-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  color: #f0c040;
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(200,150,12,0.2);
}
.snk-extra p {
  font-size: 12px !important;
  margin-bottom: 4px !important;
}

/* =============================================
   Toast milestone variant
   ============================================= */
.redeem-toast.milestone {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 13px;
  white-space: normal;
  max-width: 90vw;
  text-align: center;
}

/* =============================================
   PROGRESS BAR — Checkpoint reward labels
   ============================================= */
.pb-ms-dot {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(200,150,12,0.35) !important;
  transition: all 0.4s;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
.pb-milestone.reached .pb-ms-dot {
  background: linear-gradient(135deg, #c8960c, #f0c040) !important;
  border-color: #f0c040 !important;
  box-shadow: 0 0 10px rgba(240,192,64,0.8) !important;
}
.pb-ms-label { display: none; } /* hide old label */

.pb-ms-label-wrap {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  pointer-events: none;
}
.pb-ms-pt {
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  color: #9a8870;
  font-weight: 700;
}
.pb-ms-reward {
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  color: #6b5f40;
  font-weight: 600;
  text-align: center;
}
.pb-milestone.reached .pb-ms-pt   { color: #f0c040; }
.pb-milestone.reached .pb-ms-reward { color: #c8960c; font-weight: 700; }

/* Extra space for labels below bar */
.pb-track-wrap { padding-bottom: 30px !important; }

/* =============================================
   MYSTERY BOX — chance badge & hangus warning
   ============================================= */
.mb-chance {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  color: #6b5f40;
  background: rgba(200,150,12,0.1);
  border: 1px solid rgba(200,150,12,0.2);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
}
.mb-warn {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: #f87171 !important;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 8px;
  padding: 5px 8px !important;
}
.mb-warn b { color: #fca5a5; }

/* =============================================
   MULTIPLIER COUNTDOWN TIMER
   ============================================= */
.mb-countdown {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #d8b4fe;
  background: rgba(168,85,247,0.15);
  padding: 1px 8px;
  border-radius: 20px;
  border: 1px solid rgba(168,85,247,0.3);
  display: inline-block;
  transition: color 0.3s;
}