/* Lucky Spin (scoped) */
.wp88-luckyspin{
  --gold:#ffd166;
  --gold2:#f59e0b;
  --ink:#0b1220;
  --card: rgba(10,18,32,.78);
  --border: rgba(255,255,255,.12);
  --text:#fff;
  --muted: rgba(255,255,255,.86);
  --muted2: rgba(255,255,255,.72);
  --ok:#22c55e;
  --purple:#8b5cf6;
}

.wp88-luckyspin{
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--text);
  position: relative;
  overflow-x: hidden;

  background: #070b14;
  background-image: var(--wp88-ls-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.wp88-luckyspin::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(900px 650px at 50% 92%, rgba(0,0,0,.62), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.45));
  pointer-events: none;
  z-index: 0;
}
.wp88-luckyspin::after{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.24);
  mask-image: radial-gradient(circle at 50% 38%, transparent 0%, black 72%);
  pointer-events: none;
  z-index: 0;
}

.wp88-ls-wrap{
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  padding: 20px 16px 28px;
}

.wp88-ls-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin: 0 auto 14px;
}

.wp88-ls-brand{display:flex; align-items:center; gap:12px; min-width:0;}
.wp88-ls-brand img{height:44px; width:auto; display:block; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));}
.wp88-ls-brandText{display:flex; flex-direction:column; gap:2px; min-width:0;}
.wp88-ls-brandName{font-weight:900; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wp88-ls-brandTag{opacity:.85; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.wp88-ls-pill{
  padding:10px 12px;
  border-radius:999px;
  font-size:.92rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; gap:8px;
  white-space: nowrap;
}
.wp88-ls-pill .dot{width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.55);}
.wp88-ls-pill.ok .dot{ background: var(--ok); }
.wp88-ls-pill.lock .dot{ background: rgba(255,255,255,.35); }

.wp88-ls-grid{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 14px;
  align-items: start;
}

.wp88-ls-card{
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px 16px 18px;
  box-shadow: 0 26px 70px rgba(0,0,0,.60);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.wp88-ls-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(460px 220px at 50% 0%, rgba(255,209,102,.18), transparent 60%),
    radial-gradient(360px 240px at 12% 40%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(360px 240px at 88% 45%, rgba(34,197,94,.10), transparent 60%);
  pointer-events:none;
}
.wp88-ls-card > *{ position: relative; z-index: 1; }

.wp88-ls-title{text-align:center; padding: 8px 6px 10px;}
.wp88-ls-title h1{font-size:2rem; margin-bottom:6px;}
.wp88-ls-subtitle{opacity:.86; font-size:.98rem;}

.wp88-ls-wheelWrap{
  position: relative;
  width: min(420px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 10px auto 14px;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}
.wp88-ls-pointer{
  position:absolute;
  top:-10px;
  left:50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 28px solid var(--gold);
  z-index: 5;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.55));
}
#wheelSvg{
  width:100%;
  height:100%;
  border-radius: 50%;
  overflow: visible;
  transform: rotate(0deg);
  transition: transform 4s cubic-bezier(.15,.85,.1,1);
  will-change: transform;
}

.wp88-ls-actions{display:flex; flex-direction:column; align-items:center; gap:10px; padding-bottom:6px;}
.wp88-ls-btnRow{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.wp88-ls-btn{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#111;
  border:none;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease, box-shadow .15s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
  position: relative;
  overflow: hidden;
  letter-spacing: .3px;
  min-width: 165px;
  text-align:center;
}
.wp88-ls-btn:hover{transform: translateY(-1px); box-shadow: 0 24px 55px rgba(0,0,0,.50);}
.wp88-ls-btn:active{transform: translateY(0) scale(.99);}
.wp88-ls-btn[disabled]{opacity:.55; cursor:not-allowed;}
.wp88-ls-btn::after{
  content:"";
  position:absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent);
  transition: transform .55s ease;
}
.wp88-ls-btn:hover::after{ transform: translateX(120%); }

.wp88-ls-btn.secondary{
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
.wp88-ls-btn.secondary::after{display:none;}

.wp88-ls-result{margin-top:2px; font-size:1.05rem; min-height:1.4em; opacity:.96; text-align:center;}
.wp88-ls-hint{font-size:.92rem; opacity:.8; text-align:center;}

.wp88-ls-rules h2{font-size:1.1rem; margin-bottom:10px;}
.wp88-ls-rules ul{padding-left:18px; display:flex; flex-direction:column; gap:8px; color:var(--muted); line-height:1.35; font-size:.96rem;}
.wp88-ls-note{margin-top:12px; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); color: var(--muted2); font-size:.93rem; line-height:1.35;}
.wp88-ls-note b{color:#fff;}

/* Gate */
.wp88-ls-gate{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(10px);
  z-index: 999;
}
.wp88-ls-gateCard{
  width: min(560px, 100%);
  background: rgba(10, 18, 32, .90);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.70);
  position: relative;
  overflow: hidden;
}
.wp88-ls-gateCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(255,209,102,.14), transparent 60%),
    radial-gradient(360px 260px at 20% 60%, rgba(139,92,246,.10), transparent 65%),
    radial-gradient(360px 260px at 80% 60%, rgba(34,197,94,.10), transparent 65%);
  pointer-events:none;
}
.wp88-ls-gateInner{ position: relative; z-index: 1; }
.wp88-ls-gateLogo{ display:flex; justify-content:center; margin-bottom:10px; }
.wp88-ls-gateLogo img{ height:48px; width:auto; }
.wp88-ls-gateInput{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  margin-bottom: 10px;
  outline: none;
}
.wp88-ls-gateActions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px;}
.wp88-ls-gateMsg{margin-top:10px; font-size:.95rem; min-height:1.2em; opacity:.95;}

@media (max-width: 920px){ .wp88-ls-grid{ grid-template-columns: 1fr; } }
@media (max-width: 520px){
  .wp88-ls-brand img{ height: 40px; }
  .wp88-ls-title h1{ font-size: 1.75rem; }
  .wp88-ls-btn{ min-width: 150px; }
}