*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#122e56,#040a17 72%);color:#fff;font:16px/1.35 system-ui,sans-serif}
main{width:min(100%,480px);margin:auto;padding:12px 14px max(16px,env(safe-area-inset-bottom));text-align:center}



.banner{position:relative;overflow:hidden;border-radius:18px;border:1px solid #f2c87280;box-shadow:0 8px 36px #0008}









.redeem:focus-visible{outline:3px solid white;outline-offset:3px}
.redeem::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 37%,#fff5 50%,transparent 63%);animation:sweep 3s ease-in-out infinite}
.effects{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.effects i{position:absolute;left:var(--x,8%);bottom:-10%;width:22px;aspect-ratio:1;border-radius:50%;border:2px solid #ffe899;background:radial-gradient(circle at 30% 20%,#fff5aa,#ffc338 50%,#b6680a);box-shadow:0 0 12px #ffc23599;animation:float 6s linear infinite;animation-delay:var(--delay,0s)}
.effects i:nth-child(2){--x:90%;--delay:-2s}
.effects i:nth-child(3){--x:16%;--delay:-4s}
.effects b{position:absolute;top:17%;left:27%;width:14%;aspect-ratio:1;background:radial-gradient(circle,#fff9ce,#f7d87f55 25%,transparent 65%);animation:sparkle 3s ease-in-out infinite alternate}
.effects b:last-child{top:58%;left:75%;animation-delay:-1.5s}
@keyframes float{from{transform:translateY(0) rotateY(0);opacity:0}15%,70%{opacity:.9}to{transform:translateY(-50vh) rotateY(650deg);opacity:0}}
@keyframes sparkle{from{transform:scale(.4);opacity:.1}to{transform:scale(1.25);opacity:.85}}
@keyframes sweep{from{transform:translateX(-100%)}55%,to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.effects,.redeem::after{display:none}}
.banner img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.redeem{position:absolute;left:3.6%;top:83.5%;width:92.5%;height:14.5%;border-radius:999px;overflow:hidden;}