

.wo{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.wo.is-open{display:flex}
.wo[hidden]{display:none!important}
.wo__veil{position:absolute;inset:0;background:#0b1020;opacity:0;transition:opacity .45s ease}
.wo.is-in .wo__veil{opacity:.94}


.wo__aur{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wo__aur i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.wo__aur i:nth-child(1){width:52vmax;height:52vmax;left:-14vmax;top:-18vmax;background:#0865ff;animation:wo-drift1 20s ease-in-out infinite}
.wo__aur i:nth-child(2){width:40vmax;height:40vmax;right:-12vmax;bottom:-14vmax;background:#2b8bff;animation:wo-drift2 26s ease-in-out infinite}
.wo__aur i:nth-child(3){width:30vmax;height:30vmax;left:34%;bottom:-12vmax;background:#6ea8ff;opacity:.3;animation:wo-drift3 32s ease-in-out infinite}
@keyframes wo-drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vmax,6vmax,0) scale(1.12)}}
@keyframes wo-drift2{0%,100%{transform:translate3d(0,0,0) scale(1.08)}50%{transform:translate3d(-7vmax,-5vmax,0) scale(1)}}
@keyframes wo-drift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-6vmax,-4vmax,0)}}

.wo__fx{position:absolute;inset:0;pointer-events:none;z-index:3}


.wo__card{position:relative;z-index:2;width:100%;max-width:404px;max-height:calc(100dvh - 40px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border-radius:24px;padding:26px 24px 22px;text-align:center;box-shadow:0 30px 90px #00000059;
  opacity:0;transform:translateY(22px) scale(.97);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.wo.is-in .wo__card{opacity:1;transform:none}
.wo__card::-webkit-scrollbar{width:0}

.wo__x{position:absolute;right:12px;top:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:#1a19190a;color:var(--ink-65);cursor:pointer;transition:background-color .2s,color .2s}
.wo__x:hover{background:#1a191914;color:var(--ink)}
.wo__x svg{width:16px;height:16px}

.wo__eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.wo__h{margin-top:8px;font-size:30px;line-height:1.1;letter-spacing:-.03em;font-weight:400;text-wrap:balance}
.wo__h b{font-weight:600}


.wo__wheel{position:relative;width:min(298px,74vw,calc(96dvh - 250px));min-width:220px;aspect-ratio:1;margin:22px auto 0}

.wo__face{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 10px 22px #1a19191f;transform:translateZ(0)}
.wo__disc{width:100%;height:100%;display:block;transform:rotate(0deg);transform-origin:50% 50%;will-change:transform}
.wo__disc.is-spinning{transition:transform var(--wo-dur,4600ms) cubic-bezier(.11,.72,.09,1)}
.wo__seg{stroke:#ffffff;stroke-width:1.5;stroke-linejoin:round}
.wo__lab{font-family:"Inter Tight",system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;text-anchor:middle;dominant-baseline:middle}


.wo__hub{position:absolute;left:50%;top:50%;width:23%;height:23%;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;
  box-shadow:0 8px 22px #1a191940,inset 0 0 0 4px #fff;border:0;padding:0;font:inherit;cursor:pointer;z-index:1;
  -webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.wo__hub:active{transform:translate(-50%,-50%) scale(.94)}
.wo__hub:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wo__hub span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1}


.wo__ptr{position:absolute;left:50%;top:-12px;width:26px;height:34px;margin-left:-13px;z-index:2;transform-origin:50% 14%;
  filter:drop-shadow(0 3px 6px #00000038)}
.wo__ptr svg{width:100%;height:100%;display:block}
.wo__ptr.is-tick{animation:wo-tick .09s cubic-bezier(.3,.9,.4,1)}
@keyframes wo-tick{0%{transform:rotate(0)}45%{transform:rotate(15deg)}100%{transform:rotate(0)}}


.wo__wheel.is-idle .wo__disc{animation:wo-breathe 3.4s ease-in-out infinite}
@keyframes wo-breathe{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.2deg)}}


.wo__prize{margin-top:2px}
.wo__pct{font-size:82px;line-height:.92;letter-spacing:-.05em;font-weight:600;color:var(--ink);
  display:block;opacity:0;transform:scale(.55);animation:wo-pop .62s cubic-bezier(.16,1.5,.4,1) forwards}
.wo__pct i{font-style:normal;font-size:.44em;letter-spacing:-.02em;vertical-align:.34em;margin-left:2px}
@keyframes wo-pop{0%{opacity:0;transform:scale(.55)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.wo__pnote{margin-top:4px;font-size:14.5px;font-weight:500;color:var(--ink-65)}
.wo__pnote b{color:var(--ink);font-weight:600}

.wo__code{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px 12px 16px;border-radius:14px;background:#f2f6ff;box-shadow:inset 0 0 0 1px #0865ff29}
.wo__code b{font-size:17px;font-weight:600;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.wo__copy{flex:none;height:34px;padding:0 13px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;cursor:pointer}
.wo__copy.is-done{background:var(--green)}

.wo__timer{margin-top:12px;font-size:12.5px;color:var(--ink-50);font-variant-numeric:tabular-nums}
.wo__timer b{color:var(--ink);font-weight:600}

.wo__cta{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.wo__cta .btn{width:100%;height:48px;font-size:15px}
.wo__later{border:0;background:none;padding:6px;font-size:13px;color:var(--ink-50);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.wo__later:hover{color:var(--ink)}


.wo__odds{margin-top:14px;text-align:left}
.wo__odds summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--ink-50);text-align:center}
.wo__odds summary::-webkit-details-marker{display:none}
.wo__odds summary:hover{color:var(--ink-65)}
.wo__odds table{width:100%;margin-top:10px;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.wo__odds th{text-align:left;font-weight:500;color:var(--ink-50);padding:4px 0}
.wo__odds td{padding:4px 0;color:var(--ink-80)}
.wo__odds td:last-child,.wo__odds th:last-child{text-align:right}
.wo__odds tr+tr td{border-top:1px solid var(--line)}

.wo__err{margin-top:14px;font-size:13.5px;line-height:20px;color:#b4232a}
.wo__fine{margin-top:14px;font-size:11.5px;line-height:17px;color:var(--ink-50);text-wrap:pretty}
.wo__fine a{color:var(--ink-65)}

.wo__step{display:none}
.wo__step.is-on{display:block;animation:wo-fade .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes wo-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


.wo__spin-btn[disabled]{opacity:.55;cursor:default}


.wo-tab{position:fixed;right:0;bottom:22px;z-index:120;display:none;align-items:center;gap:9px;height:46px;padding:0 16px 0 14px;
  border:0;border-radius:999px 0 0 999px;background:var(--ink);color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 26px #1a191940;transform:translateX(110%);transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.wo-tab.is-on{display:flex}
.wo-tab.is-shown{transform:none}
.wo-tab svg{width:17px;height:17px;flex:none}
.wo-tab__dot{position:absolute;left:5px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 #00ff8699;animation:wo-pulse 2.2s ease-out infinite}
@keyframes wo-pulse{0%{box-shadow:0 0 0 0 #00ff8699}70%{box-shadow:0 0 0 9px #00ff8600}100%{box-shadow:0 0 0 0 #00ff8600}}

@media (max-width:767px){
  .wo{padding:0;align-items:flex-end}
  .wo__card{max-width:none;border-radius:24px 24px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom));max-height:96dvh}
  .wo.is-in .wo__card{transform:none}
  .wo__card{transform:translateY(40px)}
  .wo__h{font-size:27px}
  .wo__pct{font-size:72px}
  .wo-tab{bottom:calc(16px + env(safe-area-inset-bottom));height:44px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .wo__veil,.wo__card{transition:none}
  .wo__aur i{animation:none}
  .wo__disc.is-spinning{transition:transform .9s ease-out}
  .wo__wheel.is-idle .wo__disc{animation:none}
  .wo__pct{animation:none;opacity:1;transform:none}
  .wo__step.is-on{animation:none}
  .wo-tab{transition:none}
  .wo-tab__dot{animation:none}
  .wo__ptr.is-tick{animation:none}
}
