/* Variant styles: backdrop themes, spin wheels (.sw-*), gift cards (.gc-*). */

/* ---------- Backdrop: see-through scrim only (the page is an overlay) ---------- */
.backdrop{position:fixed;inset:0;pointer-events:none;background:rgba(12,12,16,.72);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.theme-light .backdrop{background:rgba(250,250,251,.6);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}

/* ---------- No sideways scrolling, ever ---------- */
.app-shell,.game-layer,.reveal-layer{overflow-x:hidden;overflow-x:clip}

/* ---------- Popup behaviour ---------- */
@keyframes popIn{0%{opacity:0;transform:scale(.8)}60%{opacity:1}100%{opacity:1;transform:none}}
.game-layer{transition:opacity .25s ease,transform .25s ease}
.backdrop{transition:opacity .25s ease}
.pop-closed .game-layer{opacity:0;transform:scale(.92);pointer-events:none}
.pop-closed .backdrop{opacity:0}
.pop-close{position:absolute;z-index:6;top:-46px;right:2px;display:grid;width:34px;height:34px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .2s}
.pop-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.theme-light .pop-close{border-color:rgba(22,24,35,.12);background:rgba(255,255,255,.7);color:#161823}
.is-locked .pop-close{opacity:0;pointer-events:none}
.pop-reopen{position:fixed;max-width:calc(100% - 32px);z-index:30;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:0;border-radius:999px;background:#fff;color:#161823;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transform:translateX(-50%);animation:reopenIn .45s cubic-bezier(.2,.9,.25,1.2) both;cursor:pointer}
.pop-reopen b{padding:7px 14px;border-radius:999px;background:#fe2c55;color:#fff;font-size:13.5px}
.pop-gift{position:relative;width:24px;height:24px;border-radius:7px;background:#fe2c55}
.pop-gift::before,.pop-gift::after{position:absolute;background:#fff;content:""}.pop-gift::before{top:0;bottom:0;left:10.5px;width:3px}.pop-gift::after{top:8px;left:0;right:0;height:3px}
@keyframes reopenIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Loader (TikTok two-dot) ---------- */
.sd-loader{position:relative;width:62px;height:26px}
.sd-loader span{position:absolute;top:0;width:26px;height:26px;border-radius:50%}
.sd-loader span:first-child{background:#25f4ee;animation:sdDotA 1s cubic-bezier(.45,0,.55,1) infinite}
.sd-loader span:last-child{background:#fe2c55;animation:sdDotB 1s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sdDotA{0%,100%{left:0;transform:scale(1);z-index:1}50%{left:36px;transform:scale(.8)}}
@keyframes sdDotB{0%,100%{left:36px;transform:scale(.8)}50%{left:0;transform:scale(1)}}

/* ---------- Spin wheel ---------- */
.sw{position:relative;display:flex;width:100%;flex-direction:column;align-items:center;animation:popIn .55s cubic-bezier(.2,.9,.25,1.15) both}
.sw-title{max-width:340px;margin:0;font-size:30px;font-style:italic;font-weight:800;line-height:1.08;letter-spacing:-.03em}
.theme-dark .sw-title{text-shadow:0 2px 14px rgba(0,0,0,.45)}
.theme-light .sw-title{color:#161823}
.sw-chip{margin:10px 0 20px;padding:6px 14px;border-radius:8px;font-size:14px;font-weight:600}
.theme-dark .sw-chip{border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.12);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.theme-light .sw-chip{border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.55);color:#161823;box-shadow:0 4px 14px -8px rgba(22,24,35,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.sw-stage{position:relative;width:min(88vw,348px);aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sw-stage.is-spinning,.sw-stage.landed{cursor:default}
.sw-stage svg{display:block;overflow:visible}
.sw-rim,.sw-rotor,.sw-bulbs{position:absolute;inset:0;width:100%;height:100%}
.sw-rim,.sw-bulbs{z-index:1}
/* static shadow under the wheel (box-shadow on its own layer, never re-rendered while spinning) */
.sw-stage::after{position:absolute;z-index:0;inset:2%;border-radius:50%;content:"";pointer-events:none}
.theme-dark .sw-stage::after{box-shadow:0 20px 34px rgba(0,0,0,.55)}
.theme-light .sw-stage::after{box-shadow:0 18px 30px rgba(22,24,35,.18)}
.sw-rotor{z-index:2;border-radius:50%;transition:transform 5.2s cubic-bezier(.12,.66,.08,1);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.sw-rotor svg{width:100%;height:100%}
.sw-rotor text{font-family:"TikTok Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-anchor:middle}
.sw-t{font-size:15px;font-weight:800;letter-spacing:-.02em}.sw-t.big{font-size:18px}
.sw-tx{font-size:19px;font-style:italic;font-weight:800;letter-spacing:-.03em}.sw-tx.big{font-size:25px}
.sw-jk{fill:#fff;font-size:13px;font-style:italic;font-weight:800}.sw-jk.big{font-size:15px}
/* jackpot glow: a soft gradient over the top slice, fades in on landing (opacity only) */
.sw-glow{position:absolute;z-index:3;top:-4%;left:27%;width:46%;height:50%;border-radius:50% 50% 45% 45%;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.55),rgba(254,44,85,.35) 45%,rgba(254,44,85,0) 72%);opacity:0;pointer-events:none;will-change:opacity}
.landed .sw-glow{animation:swGlow .7s ease-in-out infinite alternate}
@keyframes swGlow{from{opacity:.25}to{opacity:1}}
.sw-bulbs{overflow:visible;pointer-events:none}.sw-bulbs.blink{will-change:opacity;animation:swBlink 1.1s steps(1) infinite}
@keyframes swBlink{0%{opacity:1}50%{opacity:0}}
.is-spinning .sw-bulbs.blink{animation-duration:.22s}.landed .sw-bulbs.blink{animation-duration:.45s}

.sw-pointer{position:absolute;z-index:5;will-change:transform;top:-5%;left:50%;width:11%;margin-left:-5.5%;transform-origin:50% 30%;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))}
.is-spinning .sw-pointer{animation:swTick .19s ease-in-out 22 alternate}
@keyframes swTick{from{transform:rotate(0)}to{transform:rotate(-14deg)}}

.sw-hub{position:absolute;z-index:4;left:50%;top:50%;display:grid;width:23%;aspect-ratio:1;place-items:center;padding:0;border:4px solid #fff;border-radius:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;transition:transform .12s ease}
.sw-hub span{font-size:18px;font-weight:800}
.sw-hub:active{transform:translate(-50%,-50%) scale(.94)}.sw-hub:disabled{cursor:default}
.hub-ink{background:radial-gradient(circle at 50% 30%,#2e303d,#161823 70%);box-shadow:0 0 0 2px rgba(254,44,85,.55),0 10px 22px rgba(0,0,0,.4)}
.hub-red{background:radial-gradient(circle at 50% 30%,#ff5c79,#fe2c55 60%,#e5244a);box-shadow:0 0 0 2px rgba(22,24,35,.2),0 10px 22px rgba(0,0,0,.35)}

.sw-cta{position:relative;display:flex;width:min(78%,300px);height:54px;margin-top:24px;align-items:center;justify-content:center;border:0;border-radius:999px;background:linear-gradient(180deg,#ff5c79,#fe2c55 55%,#e5244a);color:#fff;font-size:19px;font-weight:800;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 10px 24px -6px rgba(254,44,85,.7);transition:transform .12s ease}
.sw-cta:active{transform:scale(.97)}.sw-cta:disabled{cursor:default;animation:none}.sw-cta:disabled .sw-hand{display:none}
.sw-cta::after,.gc-cta::after{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(254,44,85,.6);content:"";opacity:0;pointer-events:none;will-change:transform,opacity;animation:ctaRing 2s ease-out infinite}
.sw-cta:disabled::after,.gc-cta:disabled::after{display:none}
@keyframes ctaRing{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.08,1.3)}}
.sw-hand{position:absolute;will-change:transform;right:-6px;bottom:-16px;width:32px;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));animation:swTap 1.5s ease-in-out infinite;pointer-events:none}
@keyframes swTap{0%,100%{transform:translate(4px,6px)}45%{transform:translate(0,0) scale(.92)}60%{transform:none}}
.sw-note{margin:20px 0 0;font-size:11.5px}
.theme-dark .sw-note{color:rgba(255,255,255,.65)}.theme-light .sw-note{color:#8a8b91}
/* double spin: nudge after the near miss */
.near .sw-chip{animation:swNudge .45s ease-in-out 2}
@keyframes swNudge{50%{transform:scale(1.06)}}

/* frosted glass wheel */
.sw--glass .sw-stage::before{position:absolute;z-index:0;inset:-1.5%;border-radius:50%;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),inset 0 2px 0 rgba(255,255,255,.35),0 24px 50px -18px rgba(0,0,0,.6);content:""}
.sw--glass .sw-stage::after{box-shadow:none}
.hub-glass{border:1.5px solid rgba(255,255,255,.75);background:rgba(22,24,35,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px rgba(0,0,0,.35)}
.sw--glass .sw-chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}

/* notification drop */
.sw-notify{display:flex;width:min(100%,350px);margin:0 0 18px;padding:10px 12px;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.16);color:#fff;text-align:left;-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:0 14px 30px -14px rgba(0,0,0,.5);animation:swDrop .6s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes swDrop{from{opacity:0;transform:translateY(-28px) scale(.96)}to{opacity:1;transform:none}}
.sw-app{position:relative;flex:0 0 38px;height:38px;border-radius:10px;background:#161823;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sw-app i{position:absolute;top:13px;left:8px;width:12px;height:12px;border-radius:50%;background:#25f4ee}.sw-app i+i{left:17px;background:#fe2c55;mix-blend-mode:screen}
.sw-ntext{display:flex;min-width:0;flex:1;flex-direction:column;gap:1px}.sw-ntext b{font-size:13.5px}.sw-ntext span{color:rgba(255,255,255,.86);font-size:13.5px}
.sw-notify time{align-self:flex-start;color:rgba(255,255,255,.6);font-size:11.5px}
.sw--notify .sw-title{font-size:28px}

@media(max-height:740px){.sw-stage{width:min(76vw,290px)}.sw-title{font-size:26px}.sw-chip{margin-bottom:14px}.sw-cta{height:50px;margin-top:18px}}

/* ---------- Gift cards ---------- */
.game-layer.is-gift{padding-inline:16px}
.gc{position:relative;width:100%;max-width:380px;padding:18px 18px 20px;border-radius:26px;background:#fff;color:#161823;box-shadow:0 30px 80px -24px rgba(0,0,0,.6);animation:popIn .55s cubic-bezier(.2,.9,.25,1.15) both}
.theme-light .gc{box-shadow:0 30px 70px -30px rgba(22,24,35,.35)}
@keyframes gcIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.gc-well{position:relative;display:block;width:100%;aspect-ratio:16/11;padding:0;overflow:hidden;border:0;border-radius:16px;background:#f4f4f5;cursor:default}
.gc-well img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gc-ticket{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;margin-top:14px;border-radius:14px;background:#fff0f3;text-align:left}
.gc-ticket::before,.gc-ticket::after{position:absolute;left:var(--notch,112px);width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;content:""}
.gc-ticket::before{top:-7px}.gc-ticket::after{bottom:-7px}
.gc-price{display:flex;min-width:112px;flex-direction:column;align-items:center;padding:14px 12px;border-right:2px dashed #ffc2cf}
.gc-price b{color:#fe2c55;font-size:28px;font-weight:800;line-height:1;letter-spacing:-.03em}
.gc-price s{margin-top:4px;color:#8a8b91;font-size:14px}
.gc-info{display:flex;min-width:0;flex-direction:column;gap:3px;padding:12px 14px}
.gc-info b{font-size:16px;font-weight:700}.gc-info span{color:#8a8b91;font-size:13.5px}
.gc-title{margin:18px 0 0;font-size:31px;font-weight:800;line-height:1.1;letter-spacing:-.035em}
.gc-title span{display:block;color:#fe2c55}
.gc-sub{margin:8px auto 0;max-width:300px;color:#8a8b91;font-size:15px;line-height:1.4}
.gc-cta{position:relative;width:100%;height:56px;margin-top:18px;border:0;border-radius:12px;background:#fe2c55;color:#fff;font-size:18px;font-weight:700;box-shadow:0 6px 18px -6px rgba(254,44,85,.55);transition:transform .12s ease,background .2s}
.gc-cta:active{transform:scale(.97);background:#e5244a}

/* unbox */
.gc-unbox .gc-well{cursor:pointer}
.gc-unbox:not(.is-open) .gc-well img{animation:gcWiggle 2.6s ease-in-out infinite}
@keyframes gcWiggle{0%,72%,100%{transform:none}76%{transform:rotate(-2.5deg) scale(1.02)}80%{transform:rotate(2.5deg) scale(1.02)}84%{transform:rotate(-1.5deg)}88%{transform:none}}
.gc-tap{position:absolute;left:50%;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(22,24,35,.82);color:#fff;font-size:12.5px;font-weight:700;transform:translateX(-50%);backdrop-filter:blur(6px)}
.gc-unbox.is-opening .gc-well img{animation:gcShake .6s ease-in-out}
@keyframes gcShake{0%,100%{transform:none}20%{transform:rotate(-5deg) scale(1.04)}40%{transform:rotate(5deg) scale(1.06)}60%{transform:rotate(-4deg) scale(1.08)}80%{transform:scale(1.14);opacity:.4}}
.gc-unbox.is-open .gc-well{cursor:default}.gc-unbox.is-open .gc-tap{display:none}
.gc-unbox.is-open .gc-well img{animation:gcPop .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes gcPop{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.gc-reveal{animation:gcPop .45s .1s cubic-bezier(.2,.8,.2,1) both}

/* reserved */
.gc-hold{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gc-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:#fff0f3;color:#fe2c55;font-size:12.5px;font-weight:700}
.gc-pill i{width:7px;height:7px;border-radius:50%;background:#fe2c55;animation:gcBlink 1.2s ease-in-out infinite}
@keyframes gcBlink{50%{opacity:.25}}
.gc-timer{padding:5px 10px;border-radius:8px;background:#161823;color:#fff;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* parcel */
.gc-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0;padding:0;list-style:none}
.gc-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;color:#8a8b91;font-size:12px;font-weight:600}
.gc-steps li+li::before{position:absolute;top:13px;right:50%;width:100%;height:2px;background:#ebebed;content:""}
.gc-steps li.now::before{background:linear-gradient(90deg,#fe2c55,#ebebed)}
.gc-steps i{position:relative;z-index:1;display:grid;width:28px;height:28px;place-items:center;border:2px solid #ebebed;border-radius:50%;background:#fff;font-size:12px;font-style:normal;font-weight:800}
.gc-steps .done{color:#161823}.gc-steps .done i{border-color:#fe2c55;background:#fe2c55;color:#fff}
.gc-steps .now{color:#fe2c55}.gc-steps .now i{border-color:#fe2c55;color:#fe2c55;box-shadow:0 0 0 4px #fff0f3}
.gc-ship{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px;padding:12px 14px;border-radius:14px;background:#f4f4f5;text-align:left;font-size:14px}
.gc-ship span{color:#54555b}.gc-ship b:last-child{color:#fe2c55}

/* frosted glass gift card */
.gc--glass{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 80px -24px rgba(0,0,0,.55)}
.gc--glass .gc-ticket{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1)}
.gc--glass .gc-ticket::before,.gc--glass .gc-ticket::after{display:none}
.gc--glass .gc-price{border-right-color:rgba(255,255,255,.3)}.gc--glass .gc-price b,.gc--glass .gc-title span{color:#ff4d6d}
.gc--glass .gc-price s,.gc--glass .gc-info span{color:rgba(255,255,255,.65)}.gc--glass .gc-sub{color:rgba(255,255,255,.78)}

/* product deal card */
.gc-product{text-align:left}
.gc-product .gc-well{border-radius:14px}
.gp-tag{position:absolute;z-index:1;top:0;left:0;padding:5px 11px;border-radius:14px 0 12px 0;background:#fe2c55;color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.01em}
.gp-name{margin:14px 0 0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.gp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:5px 0 0;color:#8a8b91;font-size:14px}
.gp-star{color:#f5b301}
.gp-meta em{margin-left:6px;padding:2px 7px;border-radius:5px;background:#e3f9f6;color:#0b8f83;font-size:13px;font-style:normal;font-weight:600}
.gp-price{display:flex;align-items:baseline;gap:8px;margin:8px 0 0}
.gp-price b{color:#fe2c55;font-size:36px;font-weight:800;line-height:1;letter-spacing:-.03em}
.gp-price s{color:#8a8b91;font-size:16px}
.gp-price i{align-self:center;padding:2px 6px;border-radius:5px;background:#ffe8ee;color:#fe2c55;font-size:13px;font-style:normal;font-weight:700}
.gc--glass .gp-meta,.gc--glass .gp-price s{color:rgba(255,255,255,.7)}

@media(max-height:720px){.gc-well{aspect-ratio:16/9}.gc-title{margin-top:14px;font-size:27px}.gc-cta{height:50px;margin-top:14px}}

/* ---------- Checkout: payment handoff ---------- */
.external-note{margin:16px 4px 10px;padding:0;border:0;background:none;color:#75767b;font-size:12.5px;line-height:1.45;text-align:center}
.pay-redirect{position:absolute;z-index:25;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:24px;background:rgba(255,255,255,.96);color:#161823;text-align:center;animation:redirIn .25s ease both}
.pay-redirect h2{margin:18px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.pay-redirect p{max-width:290px;margin:4px 0 0;color:#75767b;font-size:14px;line-height:1.45}
@keyframes redirIn{from{opacity:0}to{opacity:1}}