/* ============================================
   SPINSHOP IDNCASH - FRONTEND STYLES (v3)
   ============================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-dark: #0a1024;
  --bg-card: rgba(15, 22, 50, 0.55);
  --bg-card-2: rgba(20, 30, 70, 0.7);
  --border: rgba(245, 200, 66, 0.35);
  --border-soft: rgba(255, 255, 255, 0.08);
  --gold: #f5c842;
  --gold-soft: #ffd96b;
  --gold-2: #e6a722;
  --text: #ffffff;
  --text-dim: #97a3c4;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  --glow: 0 0 24px rgba(245, 200, 66, 0.18);
}

html, body { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  color: var(--text);
  background: var(--bg-dark) url('https://spinshop-idnc.com/assets/bgdesktop.webp')
              center top / cover no-repeat fixed;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ===== NAV ===== */
.nav {
  background: linear-gradient(180deg, rgba(10,16,36,0.95) 0%, rgba(10,16,36,0.7) 100%);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-inner {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px; max-width: 1340px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 38px; }
.brand-text { font-size: 17px; font-weight: 800; letter-spacing: 1px; line-height: 1; }
.brand-text small { display: block; font-size: 9px; color: var(--text-dim); letter-spacing: 1.5px; font-weight: 500; margin-top: 4px; }
.nav-menu { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-menu a {
  padding: 8px 16px; color: var(--text-dim); position: relative;
  font-weight: 600; font-size: 14px; transition: color .2s;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--gold); }
.nav-menu a.active::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 2px; background: var(--gold); border-radius: 2px;
}
.nav-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: rgba(245,200,66,0.07);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--glow);
}
.nav-stat-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900;
  display: flex; align-items: center; justify-content: center;
}
.nav-stat-text small { display: block; font-size: 10px; color: var(--text-dim); line-height: 1; }
.nav-stat-text b { font-size: 18px; color: var(--text); font-weight: 800; }
.nav-stat-text span { font-size: 10px; color: var(--text-dim); margin-left: 3px; }
.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--border);
  color: var(--gold); width: 38px; height: 38px; border-radius: 9px;
  font-size: 18px; cursor: pointer;
}

/* ===== PAGE GRID (main column + side column) ===== */
.page-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 28px 22px 40px;
  align-items: start;
}
.main-col {
  display: flex; flex-direction: column; gap: 22px;
  min-width: 0; /* prevent grid blowout */
}
.side-col {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 80px;
}

/* ===== HERO ===== */
.hero {
  display: grid;
  grid-template-columns: 0.85fr 1.55fr;
  gap: 22px; align-items: center;
}
.hero-left h1 {
  font-size: 34px; font-weight: 900; line-height: 1.05; margin-bottom: 6px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero-left h1 .accent {
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; font-size: 42px; line-height: 1;
}
.hero-left .tagline { color: var(--text-dim); margin: 14px 0 20px; font-size: 13px; line-height: 1.55; }

.feature-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--glow);
}
.feature-item { display: flex; gap: 10px; align-items: center; }
.feature-icon {
  width: 32px; height: 32px; min-width: 32px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(245,200,66,0.2), rgba(245,200,66,0.05));
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.feature-icon svg { width: 16px; height: 16px; }
.feature-text b { font-size: 12.5px; color: var(--text); display: block; }
.feature-text span { font-size: 11px; color: var(--text-dim); line-height: 1.3; }

/* ===== SIDE COLUMN: REDEEM ===== */
.redeem-card {
  background: linear-gradient(180deg, var(--bg-card-2) 0%, rgba(10,16,40,0.95) 100%);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 22px;
  box-shadow: var(--shadow), var(--glow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.redeem-card h2 { font-size: 20px; font-weight: 800; margin-bottom: 4px; letter-spacing: 0.5px; }
.redeem-card h2 .gold { color: var(--gold); }
.redeem-card .desc { font-size: 12.5px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.5; }
.input-group { margin-bottom: 12px; }
.input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 11px 13px;
  transition: border-color .2s, background .2s;
}
.input-wrap:focus-within { border-color: var(--gold); background: rgba(0,0,0,0.45); }
.input-wrap svg { width: 17px; height: 17px; color: var(--text-dim); flex-shrink: 0; }
.input-wrap input {
  background: transparent; border: 0; outline: 0; color: var(--text);
  font-size: 14px; flex: 1; min-width: 0; font-family: inherit;
}
.input-wrap input::placeholder { color: rgba(255,255,255,0.4); }
.input-hint { font-size: 11px; color: var(--text-dim); margin-top: 5px; padding-left: 4px; }
.input-hint.error { color: #ff6b6b; }
.btn-redeem {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 18px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-2) 100%);
  color: #2a1900; font-weight: 800; font-size: 15px; letter-spacing: 0.5px;
  box-shadow: 0 6px 24px rgba(245,200,66,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .15s, box-shadow .15s;
  margin-top: 4px; cursor: pointer;
}
.btn-redeem:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-redeem:active { transform: translateY(0); }
.btn-redeem:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.btn-redeem svg { width: 18px; height: 18px; }
.redeem-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 9px 12px;
  background: rgba(245,200,66,0.07); border: 1px solid var(--border-soft);
  border-radius: 10px; font-size: 11.5px; color: var(--text-dim);
}
.redeem-note svg { width: 14px; height: 14px; color: var(--gold); }

/* ===== SIDE COLUMN: WINNERS ===== */
.winners-card {
  background: linear-gradient(180deg, var(--bg-card-2), rgba(10,16,40,0.95));
  border: 1px solid var(--border);
  border-radius: 18px; padding: 16px;
  box-shadow: var(--shadow), var(--glow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.winners-card h3 {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 800; color: var(--gold);
  margin-bottom: 12px;
}
.winners-card h3 .crown { color: var(--gold); }
.winners-card h3 a { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.winners-card h3 a:hover { color: var(--gold); }
.winners-empty { text-align: center; color: var(--text-dim); padding: 12px; font-size: 13px; }
.winner-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--border-soft);
}
.winner-row:first-of-type { border-top: 0; }
.winner-img {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 8px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.winner-img img { max-width: 85%; max-height: 85%; object-fit: contain; }
.winner-info { flex: 1; min-width: 0; }
.winner-info b { display: block; font-size: 12.5px; font-weight: 700; }
.winner-info span { display: block; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner-time {
  font-size: 10px; color: var(--text-dim);
  background: rgba(255,255,255,0.05); padding: 3px 7px;
  border: 1px solid var(--border-soft); border-radius: 8px;
  white-space: nowrap;
}
.winner-time.now { background: rgba(245,200,66,0.15); border-color: var(--border); color: var(--gold); }

/* ===== SPIN WHEEL ===== */
.spin-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  width: 100%; min-width: 0;
}
.spin-stage {
  position: relative;
  width: 100%; max-width: 540px;
  aspect-ratio: 1;
  margin: 0 auto;
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
  .spin-stage { padding-bottom: 100%; height: 0; }
  .spin-stage > * { position: absolute; }
}

/* Wheel SVG container */
.wheel-shell {
  position: absolute; inset: 6%;
  display: flex; align-items: center; justify-content: center;
}
.wheel {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%; will-change: transform;
}
.wheel-svg { width: 100%; height: 100%; display: block; }

/* Prize images overlay - positioned absolutely over stage, always upright */
.wheel-images {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.prize-img {
  position: absolute;
  /* left/top set by JS — defaults so first paint doesn't break */
  left: 50%; top: 50%;
  width: 14%; height: 14%;
  object-fit: contain;
  transform: translate(-50%, -50%); /* center anchor at its left/top point */
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.65))
          drop-shadow(0 2px 4px rgba(0,0,0,0.55))
          drop-shadow(0 0 10px rgba(255,255,255,0.15));
  will-change: left, top;
}

/* Border ring (asset has its own pointer at top) */
.spin-border {
  position: absolute; inset: -3%;
  background-image: url('https://spinshop-idnc.com/assets/borderspin.webp');
  background-size: contain; background-position: center; background-repeat: no-repeat;
  pointer-events: none; z-index: 5;
  filter: drop-shadow(0 0 24px rgba(245,200,66,0.25));
}

/* Center asset (uses border-tengah.webp - transparent) */
.spin-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30%; height: 30%;
  display: flex; align-items: center; justify-content: center;
  z-index: 6;
  pointer-events: none;
}
.spin-center img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5));
}

/* Hide JS-injected pointer arrow if it exists (the border asset has one already) */
.spin-pointer { display: none !important; }

/* ===== PANELS (Daftar Hadiah / Cara Main) ===== */
.panel-section { width: 100%; }
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px; padding: 18px 20px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow), var(--glow);
  position: relative;
}
.panel::before {
  /* subtle gold glow on top edge */
  content: ''; position: absolute; inset: 0;
  border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(245,200,66,0.15);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.panel-head.center { justify-content: center; flex-direction: column; text-align: center; gap: 4px; }
.panel-title { display: flex; align-items: center; gap: 10px; }
.panel-title .icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  display: flex; align-items: center; justify-content: center;
  color: #2a1900;
}
.panel-title h3 { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; color: var(--gold); }
.panel-title h3 small { color: var(--text-dim); font-size: 12px; margin-left: 6px; font-weight: 400; }
.panel-sub { color: var(--text-dim); font-size: 12px; }
.panel-link {
  color: var(--text-dim); font-size: 13px;
  display: flex; align-items: center; gap: 4px; transition: color .2s;
}
.panel-link:hover { color: var(--gold); }

/* Prize strip with horizontal scroll on overflow */
.prize-strip-wrap {
  overflow-x: auto; overflow-y: hidden;
  margin: 0 -4px; padding: 4px 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.prize-strip-wrap::-webkit-scrollbar { height: 8px; }
.prize-strip-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.prize-strip-wrap::-webkit-scrollbar-thumb { background: rgba(245,200,66,0.5); border-radius: 4px; }
.prize-strip-wrap::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.prize-strip {
  display: flex; gap: 12px; padding: 2px 4px;
  min-width: min-content;
}
.prize-card {
  flex: 0 0 130px;
  background: linear-gradient(180deg, rgba(20,30,70,0.55), rgba(8,15,40,0.55));
  border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 12px 10px;
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.prize-card:hover {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(245,200,66,0.2);
}
.prize-card-img {
  height: 70px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.prize-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prize-card-name { font-size: 11px; font-weight: 600; line-height: 1.3; min-height: 28px; }
.prize-card-stock {
  display: inline-block; margin-top: 6px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--border-soft);
  padding: 2px 8px; border-radius: 8px; font-size: 10px; color: var(--gold);
}
.strip-empty {
  width: 100%; text-align: center; color: var(--text-dim); padding: 18px;
}

/* ===== CARA MAIN STEPS ===== */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  align-items: stretch;
}
.step {
  background: rgba(0,0,0,0.25); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 14px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.step-num {
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.step-icon {
  width: 38px; height: 38px; min-width: 38px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.step-icon svg { width: 20px; height: 20px; }
.step-text b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.step-text span { font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.step:not(:last-child)::after {
  content: '›'; position: absolute; right: -12px; top: 50%;
  transform: translateY(-50%); color: var(--gold); font-size: 22px;
  font-weight: 800; z-index: 1;
}

/* ===== TOAST ===== */
.toast {
  position: fixed; top: 80px; right: 20px; z-index: 200;
  background: var(--bg-card-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  min-width: 260px; max-width: 340px;
  box-shadow: var(--shadow);
  transform: translateX(120%); transition: transform .35s cubic-bezier(.5,.6,.3,1.5);
}
.toast.show { transform: translateX(0); }
.toast.success { border-color: rgba(34,197,94,0.4); }
.toast.error { border-color: rgba(220,38,38,0.4); }
.toast-icon { width: 22px; height: 22px; flex-shrink: 0; }
.toast.success .toast-icon { color: #4ade80; }
.toast.error .toast-icon { color: #fca5a5; }
.toast b { display: block; font-size: 13px; font-weight: 700; }
.toast span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ===== WIN MODAL ===== */
.win-modal {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,20,80,0.7) 0%, rgba(0,0,0,0.92) 70%);
  display: none; align-items: center; justify-content: center;
  z-index: 300; padding: 20px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.win-modal.show { display: flex; animation: fadeIn .35s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.win-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20,28,68,0.78) 0%, rgba(10,16,40,0.85) 100%);
  border: 2px solid rgba(245,200,66,0.55);
  border-radius: 22px;
  padding: 32px 28px 26px;
  max-width: 400px; width: 100%;
  text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(245,200,66,0.45),
    0 0 120px rgba(245,200,66,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
  animation: popIn .5s cubic-bezier(.5,.6,.3,1.5), winGlowPulse 2.2s ease-in-out 0.5s infinite;
  overflow: hidden;
}
@keyframes popIn {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes winGlowPulse {
  0%, 100% {
    box-shadow:
      0 24px 80px rgba(0,0,0,0.6),
      0 0 60px rgba(245,200,66,0.45),
      0 0 120px rgba(245,200,66,0.2),
      inset 0 1px 0 rgba(255,255,255,0.12);
  }
  50% {
    box-shadow:
      0 24px 80px rgba(0,0,0,0.6),
      0 0 90px rgba(245,200,66,0.7),
      0 0 160px rgba(245,200,66,0.35),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }
}

/* Rotating light rays behind everything */
.win-glow-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  margin-left: -300px; margin-top: -300px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(245,200,66,0.18) 12deg, transparent 24deg,
    transparent 36deg, rgba(245,200,66,0.22) 48deg, transparent 60deg,
    transparent 90deg, rgba(255,217,107,0.14) 102deg, transparent 114deg,
    transparent 144deg, rgba(245,200,66,0.18) 156deg, transparent 168deg,
    transparent 198deg, rgba(245,200,66,0.20) 210deg, transparent 222deg,
    transparent 252deg, rgba(255,217,107,0.14) 264deg, transparent 276deg,
    transparent 306deg, rgba(245,200,66,0.16) 318deg, transparent 330deg,
    transparent 360deg
  );
  animation: rayRotate 18s linear infinite;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
}
@keyframes rayRotate {
  to { transform: rotate(360deg); }
}

/* Sparkles around the card */
.win-sparkle {
  position: absolute; color: var(--gold);
  font-size: 16px; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 0 6px rgba(245,200,66,0.8));
  animation: sparkleFloat 2.5s ease-in-out infinite;
}
.win-sparkle.s1 { top: 14%;  left: 10%; animation-delay: 0s;   font-size: 18px; }
.win-sparkle.s2 { top: 18%;  right: 14%; animation-delay: 0.6s; font-size: 14px; }
.win-sparkle.s3 { bottom: 24%; left: 16%; animation-delay: 1.1s; font-size: 12px; }
.win-sparkle.s4 { bottom: 18%; right: 12%; animation-delay: 1.7s; font-size: 16px; }
@keyframes sparkleFloat {
  0%, 100% { opacity: 0.3; transform: translateY(0) scale(0.7) rotate(0deg); }
  50%      { opacity: 1;   transform: translateY(-8px) scale(1.15) rotate(180deg); }
}

.win-badge {
  position: relative; z-index: 3;
  display: inline-block; padding: 7px 18px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: #2a1900; font-weight: 800; font-size: 14px; letter-spacing: 1px;
  border-radius: 30px; margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.win-img-wrap {
  position: relative; z-index: 3;
  width: 200px; height: 200px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.win-img-halo {
  position: absolute; inset: -25%;
  background:
    radial-gradient(circle at center, rgba(245,200,66,0.55) 0%, rgba(245,200,66,0.18) 30%, transparent 65%);
  filter: blur(8px);
  animation: haloPulse 2s ease-in-out infinite;
  z-index: 0;
}
@keyframes haloPulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.win-img-wrap img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  animation: imgFloat 3s ease-in-out infinite;
}
@keyframes imgFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.win-text { position: relative; z-index: 3; }
.win-text p { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.win-text h2 { font-size: 21px; font-weight: 800; color: var(--gold); margin-bottom: 22px; line-height: 1.2; }

.modal-btn {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, var(--gold-2));
  color: #2a1900; border: 0; padding: 14px 32px; border-radius: 14px;
  font-weight: 800; font-size: 15px; letter-spacing: 0.5px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(245,200,66,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245,200,66,0.7), inset 0 1px 0 rgba(255,255,255,0.5);
}
.modal-btn:active { transform: translateY(0); }
.modal-btn svg { width: 18px; height: 18px; }

/* Confetti */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 299; }

/* ===== FLOATING SLOT ===== */
.floating-slot { position: fixed; bottom: 20px; z-index: 100; }
.floating-slot.floating-left { left: 20px; }
.floating-slot.floating-right { right: 20px; }

/* ===== FOOTER ===== */
.footer {
  text-align: center; padding: 30px 20px;
  color: var(--text-dim); font-size: 13px;
  border-top: 1px solid var(--border-soft); margin-top: 30px;
}

/* ===== GENERIC SUBPAGES ===== */
.wrap { max-width: 1340px; margin: 0 auto; padding: 20px 22px; }
.page-hero {
  text-align: center; padding: 50px 20px 30px;
}
.page-hero h1 {
  font-size: 42px; font-weight: 900;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 1px;
}
.page-hero p { color: var(--text-dim); font-size: 14px; margin-top: 10px; max-width: 540px; margin-left: auto; margin-right: auto; }

.section { max-width: 1340px; margin: 30px auto; padding: 0 22px; }
.grid-prizes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.grid-prizes .prize-card { flex: initial; padding: 18px 14px; }
.grid-prizes .prize-card-img { height: 130px; margin-bottom: 12px; }
.grid-prizes .prize-card-name { font-size: 14px; min-height: 38px; }

/* FAQ */
.faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.faq-q {
  padding: 14px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 14px;
}
.faq-q::after { content: '+'; color: var(--gold); font-size: 22px; font-weight: 800; line-height: 1; }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a {
  max-height: 0; padding: 0 20px; color: var(--text-dim); font-size: 13px;
  transition: max-height .3s, padding .3s; overflow: hidden; line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 600px; padding: 0 20px 18px; }

/* Cara Main full page */
.cara-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }

/* Pemenang full page */
.winners-full { max-width: 900px; margin: 0 auto; }
.search-bar-wrap {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 8px 16px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.search-bar-wrap input {
  background: transparent; border: 0; outline: 0; color: var(--text);
  font-size: 14px; flex: 1; font-family: inherit; padding: 6px 0;
}
.pagi { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.pagi a, .pagi span {
  padding: 7px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
  color: var(--text); font-size: 13px;
}
.pagi a:hover { border-color: var(--gold); color: var(--gold); }
.pagi .active { background: var(--gold); color: #2a1900; border-color: var(--gold); font-weight: 800; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet & small desktop: stack page-grid */
@media (max-width: 1100px) {
  .page-grid {
    grid-template-columns: 1fr;
    padding: 22px 18px 30px;
  }
  .side-col { position: static; top: auto; order: 2; }
  .main-col { order: 1; }
  /* Hero text becomes single column on tablet */
  .hero { grid-template-columns: 0.8fr 1.2fr; }
  .hero-left h1 { font-size: 28px; }
  .hero-left h1 .accent { font-size: 36px; }
  .spin-stage { max-width: 500px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2)::after { display: none; }
  .grid-prizes { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  body {
    background-image: url('https://spinshop-idnc.com/assets/bgmobile.webp');
    background-attachment: fixed; background-size: cover;
  }
  .nav-inner { padding: 10px 14px; gap: 10px; }
  .brand img { height: 34px; }
  .brand-text { font-size: 14px; }
  .brand-text small { font-size: 8px; letter-spacing: 1px; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-card-2); flex-direction: column; gap: 0;
    border-top: 1px solid var(--border-soft); padding: 8px 0;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); }
  .nav-menu a.active::after { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-stat { padding: 5px 10px; gap: 8px; }
  .nav-stat-icon { width: 28px; height: 28px; }
  .nav-stat-text small { font-size: 9px; }
  .nav-stat-text b { font-size: 15px; }

  .page-grid { padding: 16px 14px 30px; gap: 16px; }

  /* Re-order children of main-col for mobile: wheel first, then hero text */
  .main-col > .hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
  }
  .main-col > .hero > .spin-wrap {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-col > .hero > .hero-left { order: 2; text-align: center; }

  /* Wheel sizing — explicit min/max to ensure visibility on mobile */
  .spin-stage {
    width: 90vw !important;
    max-width: 460px !important;
    min-width: 280px;
    margin: 0 auto;
  }

  .hero-left h1 { font-size: 22px; }
  .hero-left h1 .accent { font-size: 28px; }
  .hero-left .tagline { font-size: 12.5px; margin: 12px auto 16px; max-width: 320px; }
  .feature-card { max-width: 360px; margin: 0 auto; }

  /* Side col content same width */
  .redeem-card { padding: 18px; }
  .redeem-card h2 { font-size: 17px; }
  .btn-redeem { padding: 12px; font-size: 14px; }
  .winners-card { padding: 14px; }

  .panel { padding: 14px 14px; border-radius: 14px; }
  .panel-title h3 { font-size: 15px; }
  .panel-title h3 small { display: none; }

  .prize-card { flex: 0 0 110px; padding: 10px 8px; }
  .prize-card-img { height: 56px; }
  .prize-card-name { font-size: 10px; min-height: 24px; }
  .prize-card-stock { font-size: 9px; padding: 2px 6px; }

  .steps { grid-template-columns: 1fr; }
  .step::after { display: none !important; }
  .step { padding: 12px; }

  .grid-prizes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cara-list { grid-template-columns: 1fr; }

  .page-hero { padding: 24px 14px 18px; }
  .page-hero h1 { font-size: 28px; }
  .page-hero p { font-size: 12.5px; }

  .toast { right: 14px; left: 14px; min-width: 0; max-width: none; }

  .win-card { padding: 22px 18px 20px; }
  .win-img-wrap { width: 150px; height: 150px; }
  .win-text h2 { font-size: 17px; }
  .win-glow-rays { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; }
  .win-sparkle { font-size: 12px !important; }

  .floating-slot { bottom: 12px; }
  .floating-slot.floating-left { left: 12px; }
  .floating-slot.floating-right { right: 12px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero-left h1 { font-size: 20px; }
  .hero-left h1 .accent { font-size: 24px; }
  .nav-stat-text small { display: none; }
  .nav-stat-text span { display: none; }
}