/* VIP SPACE · Ruleta VIP — dark neon overlay */
#page-roulette{
  --vip-purple:#6e4df6;
  --vip-purple-2:#5838dc;
  --vip-cyan:#16bdd5;
  --vip-pink:#ef4a9b;
  --vip-ink:#070713;
  --vip-panel:#10101c;
  position:relative;
  isolation:isolate;
  padding-bottom:18px;
}
#page-roulette::before{
  content:"";
  position:absolute;
  inset:-18px -8px 0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,rgba(110,77,246,.42),transparent 32%),
    radial-gradient(circle at 92% 4%,rgba(22,189,213,.28),transparent 28%),
    radial-gradient(circle at 50% 72%,rgba(239,74,155,.16),transparent 36%),
    linear-gradient(180deg,#050510 0%,#0b0b18 55%,#070713 100%);
  border-radius:28px;
}
#page-roulette::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(115,218,255,.9) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(186,155,255,.8) 0 1px,transparent 1.5px);
  background-size:140px 140px, 210px 210px, 90px 90px;
  background-position:0 0, 40px 70px, 18px 30px;
  animation:rouletteStarfield 28s linear infinite;
  mask-image:linear-gradient(#000 40%,transparent 96%);
}
#page-roulette .roulette-card{
  max-width:1100px!important;
  width:min(1100px,100%)!important;
  margin:0 auto!important;
  overflow:visible!important;
  color:#f4f1ff!important;
  border:1px solid rgba(162,143,255,.28)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(110,77,246,.28),transparent 38%),
    linear-gradient(180deg,rgba(18,16,36,.96),rgba(9,9,18,.98))!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 28px 90px rgba(8,4,28,.55),
    0 0 80px rgba(110,77,246,.18)!important;
}
#page-roulette .official-release{display:none!important}
#page-roulette .eyebrow{
  color:#7ce8ff!important;
  text-shadow:0 0 18px rgba(22,189,213,.45)!important;
  background:transparent!important;
  border:0!important;
}
#page-roulette h1{
  margin:.35rem 0 .4rem!important;
  color:#fff!important;
  font-size:clamp(34px,6vw,58px)!important;
  letter-spacing:.04em!important;
  text-shadow:0 0 28px rgba(110,77,246,.55),0 8px 28px rgba(0,0,0,.45)!important;
}
#page-roulette .roulette-subtitle,
#page-roulette .roulette-terms-note,
#page-roulette .muted{
  color:#b7b4c9!important;
}
#page-roulette .roulette-mode{
  display:inline-block!important;
  margin:8px 0 4px!important;
  padding:6px 12px!important;
  border-radius:999px!important;
  color:#efe8ff!important;
  background:linear-gradient(120deg,rgba(110,77,246,.35),rgba(22,189,213,.28))!important;
  border:1px solid rgba(162,143,255,.38)!important;
}
#page-roulette .roulette-meta-grid .card,
#page-roulette .roulette-status-panel,
#page-roulette .roulette-prize-showcase{
  color:#efeaff!important;
  background:
    radial-gradient(circle at 100% 0,rgba(22,189,213,.16),transparent 42%),
    linear-gradient(160deg,rgba(24,22,48,.92),rgba(12,12,24,.92))!important;
  border:1px solid rgba(130,104,255,.22)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.28)!important;
}
#page-roulette .roulette-meta-grid strong{color:#fff!important}
#page-roulette .roulette-prize-orbit{
  position:relative;
  width:118px;height:118px;margin:0 auto;
}
#page-roulette .orbit-ring{
  position:absolute;inset:10px;border-radius:50%;
  border:1px dashed rgba(124,232,255,.35);
  animation:rouletteOrbit 16s linear infinite;
}
#page-roulette .orbit-ring.two{inset:22px;border-style:solid;border-color:rgba(239,74,155,.28);animation-duration:11s;animation-direction:reverse}
#page-roulette .roulette-prize-orbit b{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;
  color:#fff;font-size:28px;letter-spacing:.04em;
}
#page-roulette .roulette-prize-orbit small{display:block;font-size:9px;color:#7ce8ff;letter-spacing:.14em}
#page-roulette .orbit-prize{
  position:absolute;width:28px;height:28px;display:grid;place-items:center;
  border-radius:50%;background:rgba(12,10,28,.85);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 12px rgba(110,77,246,.4);font-style:normal;
}
#page-roulette .orbit-prize.p1{left:4px;top:18px}
#page-roulette .orbit-prize.p2{right:2px;top:10px}
#page-roulette .orbit-prize.p3{left:10px;bottom:8px}
#page-roulette .orbit-prize.p4{right:12px;bottom:4px}

#page-roulette .wheel-stage{
  width:min(430px,84vw)!important;
  aspect-ratio:1;
  margin:28px auto 22px!important;
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  filter:drop-shadow(0 18px 40px rgba(8,0,32,.7)) drop-shadow(0 0 28px rgba(110,77,246,.35))!important;
  background:transparent!important;
  animation:rouletteIdleGlow 4.2s ease-in-out infinite!important;
}
#page-roulette .wheel-atmosphere,
#page-roulette .wheel-halo,
#page-roulette .wheel-rim,
#page-roulette .wheel-glass{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
}
#page-roulette .wheel-atmosphere{
  inset:-18%;
  z-index:0;
  background:
    radial-gradient(circle,rgba(110,77,246,.22),transparent 54%),
    repeating-radial-gradient(circle,transparent 0 42px,rgba(124,232,255,.07) 43px 44px);
  filter:blur(.2px);
}
#page-roulette .wheel-halo{
  inset:-7%;
  z-index:1;
  border:2px solid rgba(124,232,255,.28);
  box-shadow:
    0 0 40px rgba(110,77,246,.35),
    0 0 70px rgba(22,189,213,.18),
    inset 0 0 24px rgba(255,255,255,.05);
  animation:rouletteHalo 8s linear infinite;
}
#page-roulette .wheel-rim{
  inset:-3%;
  z-index:3;
  background:
    repeating-conic-gradient(from 0deg,
      #1b1633 0 6deg,
      #6e4df6 6deg 7deg,
      #12101f 7deg 13deg,
      #16bdd5 13deg 14deg);
  -webkit-mask:radial-gradient(circle,transparent 67%,#000 68%);
  mask:radial-gradient(circle,transparent 67%,#000 68%);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
#page-roulette .wheel-orbit-dot{
  z-index:4!important;
  width:10px!important;height:10px!important;
  background:#73daff!important;
  box-shadow:0 0 16px #73daff!important;
  animation:roulettePulse 1.8s ease-in-out infinite alternate!important;
}
#page-roulette .wheel-orbit-dot.two{
  background:#ff8bc7!important;
  box-shadow:0 0 16px #ff8bc7!important;
  animation-delay:.5s!important;
}
#page-roulette .wheel-orbit-dot.three{
  left:78%;top:12%;
  background:#c4b5ff!important;
  box-shadow:0 0 16px #c4b5ff!important;
  animation-delay:1s!important;
}
#page-roulette .wheel{
  position:absolute!important;
  inset:7%!important;
  z-index:5!important;
  width:auto!important;
  height:auto!important;
  border-radius:50%!important;
  overflow:hidden!important;
  border:6px solid rgba(244,242,255,.92)!important;
  outline:0!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 42px rgba(110,77,246,.38),
    inset 0 0 0 3px rgba(22,189,213,.35)!important;
  transform-origin:50% 50%;
}
#page-roulette .wheel-ticks{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:repeating-conic-gradient(from 0deg,transparent 0 calc(var(--seg,45deg) - 1.1deg),rgba(255,255,255,.55) calc(var(--seg,45deg) - 1.1deg) var(--seg,45deg));
  mix-blend-mode:soft-light;
  opacity:.85;
}
#page-roulette .wheel-glass{
  inset:7%;
  z-index:6;
  background:
    linear-gradient(135deg,rgba(255,255,255,.22),transparent 36%,transparent 62%,rgba(22,189,213,.08)),
    radial-gradient(circle at 50% 120%,rgba(0,0,0,.28),transparent 46%);
  box-shadow:inset 0 0 24px rgba(255,255,255,.08);
}
#page-roulette .wheel-pointer{
  position:absolute!important;
  z-index:12!important;
  left:50%!important;
  top:-18px!important;
  width:28px!important;
  height:52px!important;
  transform:translateX(-50%)!important;
  background:transparent!important;
  border:0!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(124,232,255,.7))!important;
}
#page-roulette .wheel-pointer span,
#page-roulette .wheel-pointer::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
#page-roulette .wheel-pointer span{
  top:0;
  width:22px;height:22px;
  border-radius:6px 6px 4px 4px;
  background:linear-gradient(180deg,#f7fbff,#7ce8ff 55%,#16bdd5);
  box-shadow:0 0 16px rgba(124,232,255,.85);
}
#page-roulette .wheel-pointer::after{
  top:16px;
  width:0;height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-top:34px solid #7ce8ff;
}
#page-roulette .wheel-hub{
  z-index:11!important;
  inset:36%!important;
  background:
    radial-gradient(circle at 32% 28%,#3a2d72,#120f22 68%)!important;
  border:5px solid #f4f2ff!important;
  color:#fff!important;
  box-shadow:
    0 0 0 3px rgba(22,189,213,.4),
    0 10px 28px rgba(0,0,0,.45),
    0 0 24px rgba(110,77,246,.45)!important;
  text-shadow:0 0 12px rgba(124,232,255,.4);
  letter-spacing:.12em!important;
}
#page-roulette .wheel-live-labels{
  position:absolute!important;
  inset:7%!important;
  z-index:8!important;
  pointer-events:none;
  overflow:visible!important;
}
#page-roulette .wheel-wedge-label{
  position:absolute!important;
  left:50%;
  top:50%;
  width:30%;
  max-width:140px;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  justify-content:center;
  text-align:center;
  color:#fff!important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));
}
#page-roulette .wheel-wedge-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:0;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#page-roulette .wheel-wedge-copy b{
  font-size:clamp(14px,3.4vw,18px);
  line-height:1;
  font-style:normal;
}
#page-roulette .wheel-wedge-copy em,
#page-roulette .wheel-wedge-copy small{
  display:block;
  max-width:100%;
  font-style:normal!important;
  font-size:clamp(11px,2.7vw,14px)!important;
  font-weight:900!important;
  line-height:1.12!important;
  letter-spacing:.01em;
  text-wrap:balance;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(8,6,24,.55)!important;
}
#page-roulette .wheel-wedge-copy small{font-size:clamp(10px,2.3vw,12px)!important;opacity:.95}
#page-roulette .wheel-wedge-label.winning .wheel-wedge-copy,
#page-roulette .wheel-wedge-label[data-selected="true"] .wheel-wedge-copy{
  transform:scale(1.06);
  filter:drop-shadow(0 0 10px rgba(124,232,255,.85));
}
#page-roulette .wheel-wedge-label.winning .wheel-wedge-copy em,
#page-roulette .wheel-wedge-label[data-selected="true"] .wheel-wedge-copy em,
#page-roulette .wheel-wedge-label.winning .wheel-wedge-copy small,
#page-roulette .wheel-wedge-label[data-selected="true"] .wheel-wedge-copy small{
  color:#fff!important;
}
#page-roulette .wheel-label-svg,
#page-roulette .wheel-labels,
#page-roulette .wheel-label{display:none!important}

#page-roulette .roulette-result{
  min-height:92px!important;
  color:#efeaff!important;
  background:linear-gradient(180deg,rgba(16,14,32,.9),rgba(10,10,20,.94))!important;
  border:1px solid rgba(124,232,255,.22)!important;
  box-shadow:inset 0 0 24px rgba(110,77,246,.12)!important;
}
#page-roulette .roulette-result strong{color:#fff!important;text-shadow:0 0 18px rgba(110,77,246,.4)}
#page-roulette .roulette-result .point-balance{color:#b7b4c9!important}
#page-roulette .roulette-result.confirmed{
  border-color:rgba(124,232,255,.55)!important;
  background:
    radial-gradient(circle at 50% 0,rgba(110,77,246,.32),transparent 55%),
    linear-gradient(180deg,rgba(22,18,48,.96),rgba(8,8,18,.98))!important;
  box-shadow:0 0 40px rgba(110,77,246,.28),inset 0 0 20px rgba(124,232,255,.12)!important;
  animation:rouletteWinFlash 1.1s ease;
}
#page-roulette .roulette-result-icon{font-size:34px;filter:drop-shadow(0 0 12px rgba(124,232,255,.6))}
#page-roulette .saved{color:#9ff3cb!important}
#page-roulette .availability-box .status{
  color:#9ff3cb!important;
  background:rgba(55,184,134,.16)!important;
  border-color:rgba(111,224,170,.3)!important;
}
#page-roulette #spinBtn.primary,
#page-roulette button.primary{
  min-height:54px!important;
  width:min(420px,100%)!important;
  color:#fff!important;
  letter-spacing:.08em!important;
  background:linear-gradient(120deg,#6e4df6,#8d56ef 46%,#16bdd5)!important;
  border:0!important;
  box-shadow:0 14px 34px rgba(110,77,246,.38),0 0 24px rgba(22,189,213,.25)!important;
}
#page-roulette #spinBtn.primary:hover{filter:brightness(1.08)}
#page-roulette .roulette-prize-list .roulette-prize-chip,
#page-roulette .roulette-prize-list span{
  color:#efeaff!important;
  background:rgba(16,14,32,.82)!important;
  border-color:rgba(130,104,255,.22)!important;
  box-shadow:none!important;
}
#page-roulette .roulette-prize-chip>i{
  background:linear-gradient(135deg,rgba(110,77,246,.4),rgba(22,189,213,.28))!important;
  color:#fff!important;
}
#page-roulette .roulette-prizes-showcase{
  background:linear-gradient(160deg,rgba(18,16,36,.94),rgba(10,10,20,.96))!important;
  border-color:rgba(130,104,255,.22)!important;
}
#page-roulette .roulette-prizes-title h2{color:#fff!important}

#page-roulette .wheel-stage.spinning{
  animation:none!important;
  filter:drop-shadow(0 18px 40px rgba(8,0,32,.7)) drop-shadow(0 0 48px rgba(22,189,213,.55))!important;
}
#page-roulette .wheel-stage.spinning .wheel-halo{animation-duration:2.2s}
#page-roulette .wheel-stage.spinning .wheel-pointer{
  animation:roulettePointerTap .18s ease-in-out infinite alternate;
}
#page-roulette .wheel-stage.locking .wheel{
  filter:saturate(1.15) brightness(1.06);
}
#page-roulette .wheel-stage.winner{
  animation:rouletteWinPulse .55s ease 3!important;
}
#page-roulette .wheel-stage.winner .wheel-pointer{
  filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 22px #7ce8ff)!important;
}
#page-roulette .wheel-stage.winner .wheel-hub{
  box-shadow:0 0 0 3px #7ce8ff,0 0 36px rgba(124,232,255,.7)!important;
}

@keyframes rouletteStarfield{to{background-position:0 140px,40px 280px,18px 120px}}
@keyframes rouletteIdleGlow{50%{filter:drop-shadow(0 18px 40px rgba(8,0,32,.7)) drop-shadow(0 0 42px rgba(110,77,246,.5))}}
@keyframes rouletteHalo{to{transform:rotate(360deg)}}
@keyframes rouletteOrbit{to{transform:rotate(360deg)}}
@keyframes roulettePulse{to{transform:scale(1.45);opacity:.55}}
@keyframes roulettePointerTap{to{transform:translateX(-50%) translateY(3px)}}
@keyframes rouletteWinPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.03)}
}
@keyframes rouletteWinFlash{
  0%{box-shadow:0 0 0 rgba(124,232,255,0)}
  40%{box-shadow:0 0 48px rgba(124,232,255,.45)}
  100%{box-shadow:0 0 40px rgba(110,77,246,.28)}
}

@media(min-width:960px){
  #page-roulette .roulette-card{
    display:grid!important;
    grid-template-columns:minmax(300px,.9fr) minmax(520px,1.2fr)!important;
    align-items:center;
    column-gap:32px!important;
    row-gap:12px!important;
    padding:36px 40px 32px!important;
    text-align:left!important;
  }
  #page-roulette .roulette-card>*{grid-column:1;justify-self:stretch}
  #page-roulette .official-release,
  #page-roulette .eyebrow,
  #page-roulette .roulette-mode{justify-self:start;width:auto!important}
  #page-roulette .wheel-stage{
    grid-column:2!important;
    grid-row:1 / span 16!important;
    width:min(540px,46vw)!important;
    margin:0 auto!important;
  }
  #page-roulette .roulette-prize-showcase{display:none!important}
  #page-roulette .roulette-meta-grid{grid-template-columns:1fr!important;margin:6px 0 8px!important}
  #page-roulette h1{font-size:clamp(40px,4.4vw,56px)!important}
  #page-roulette #spinBtn.primary{width:100%!important}
  #page-roulette .roulette-prize-list,
  #page-roulette .roulette-terms-note{grid-column:1 / -1!important}
  #page-roulette .roulette-prize-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:8px!important}
  #page-roulette .wheel-wedge-copy em{font-size:13px!important}
}
@media(max-width:820px){
  #page-roulette .wheel-stage{width:min(390px,88vw)!important}
  #page-roulette h1{font-size:clamp(30px,9vw,44px)!important}
}
@media(max-width:620px){
  #page-roulette{margin:0 -4px}
  #page-roulette .roulette-card{padding:18px 14px 22px!important;border-radius:22px!important}
  #page-roulette .wheel-stage{width:min(318px,86vw)!important;margin:18px auto 16px!important}
  #page-roulette .wheel-hub{font-size:11px!important;letter-spacing:.08em!important}
  #page-roulette .wheel-wedge-label{width:36%!important;max-width:118px}
  #page-roulette .wheel-wedge-copy em{font-size:clamp(10px,3.1vw,13px)!important}
  #page-roulette .wheel-pointer{top:-14px!important;height:44px!important}
  #page-roulette .roulette-meta-grid{grid-template-columns:1fr!important}
  #page-roulette .roulette-prize-list{grid-template-columns:1fr!important}
  #page-roulette #spinBtn.primary{width:100%!important}
}
@media(prefers-reduced-motion:reduce){
  #page-roulette::after,
  #page-roulette .wheel-stage,
  #page-roulette .wheel-halo,
  #page-roulette .wheel-orbit-dot,
  #page-roulette .orbit-ring,
  #page-roulette .wheel-stage.spinning .wheel-pointer,
  #page-roulette .roulette-result.confirmed{animation:none!important}
}

#page-roulette .roulette-status-panel{
  min-height:0!important;
  padding:18px 20px!important;
}
#page-roulette .roulette-status-panel::after{display:none!important;content:none!important}
#page-roulette .roulette-result small,
#page-roulette .roulette-result strong,
#page-roulette .roulette-result .saved{display:block!important}
#page-roulette .roulette-result small{margin-bottom:4px!important}
#page-roulette .roulette-status-panel strong,
#page-roulette .roulette-status-word{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  font-size:clamp(22px,2.2vw,30px)!important;
  letter-spacing:.12em!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}
#page-roulette .roulette-status-panel.is-locked strong,
#page-roulette .roulette-status-panel .roulette-status-word{
  color:#ffe37a!important;
  text-shadow:0 0 18px rgba(255,210,90,.35)!important;
}
#page-roulette .wheel-wedge-label{
  width:38%!important;
  max-width:168px!important;
}
#page-roulette .wheel-wedge-copy em,
#page-roulette .wheel-wedge-copy small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media(min-width:960px){
  #page-roulette .roulette-card{
    grid-template-columns:minmax(380px,1fr) minmax(520px,1.2fr)!important;
  }
  #page-roulette .roulette-status-panel{min-height:0!important}
  #page-roulette .wheel-wedge-copy em{font-size:13px!important}
  #page-roulette .wheel-wedge-copy small{font-size:12px!important}
}
