*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
html, body{height:100%;}
:root{
  --bg1:#0b1220;
  --bg2:#0e1016;
  --accent1:#22c55e;
  --accent2:#f59e0b;
  --accent3a:#fe2c55;
  --accent3b:#25f4ee;
  --ctaText:#07110a;
  --text:#ffffff;
  --muted:#cfd3db;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

body{
  background: radial-gradient(1200px 700px at 50% -10%, rgba(37,244,238,0.15), transparent 60%),
              radial-gradient(900px 600px at 10% 110%, rgba(34,197,94,0.18), transparent 60%),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.app{
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding-top:calc(14px + var(--safe-top));
  padding-bottom:calc(14px + var(--safe-bottom));
  padding-left:14px;
  padding-right:14px;
}

.header{
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}

.brand-pulse{
  font-weight:1000;
  font-size:20px;
  letter-spacing:0.4px;
  background:linear-gradient(90deg,var(--accent3a),var(--accent3b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
  padding:6px 12px;
}
.brand-pulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  filter:blur(16px);
  background:radial-gradient(circle at 50% 50%, rgba(254,44,85,0.25), transparent 50%),
             radial-gradient(circle at 70% 50%, rgba(37,244,238,0.25), transparent 55%);
  animation:pulseGlow 2.4s ease-in-out infinite;
  z-index:-1;
}
@keyframes pulseGlow{
  0%,100%{opacity:0.6; transform:scale(1);}
  50%{opacity:1; transform:scale(1.04);}
}

h1{font-size:20px;line-height:1.15;}
.highlight{color:var(--accent1);text-shadow:0 0 20px rgba(34,197,94,0.35);}
.subtitle{color:var(--muted);font-size:13px;max-width:90vw;}

.wheel-area{
  flex:1;
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.wheel-wrap{
  position:relative;
  width:min(92vw, 520px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.55));
}

canvas{
  width:100%;
  height:100%;
  border-radius:50%;
  transition:transform 4s cubic-bezier(.09,.74,.23,.98);
  will-change:transform;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), rgba(255,255,255,0));
}

.pointer{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  font-size:min(8vw, 28px);
  color:var(--accent2);
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

.spin-btn-center{
  position:absolute;
  width:40%;
  max-width:180px;
  aspect-ratio:1/1;
  border-radius:999px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 38px rgba(34,197,94,0.35), inset 0 4px 16px rgba(255,255,255,0.25);
  background: radial-gradient(circle at 30% 30%, #34d399, #22c55e 55%, #16a34a 100%);
  outline:none;
}

.spin-text{
  color:var(--ctaText);
  font-weight:900;
  font-size:min(6vw, 24px);
  letter-spacing:0.5px;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
}

.spin-btn-center:active{transform:scale(0.98);}

.result{
  width:100%;
  max-width:560px;
  text-align:center;
  background:linear-gradient(180deg, rgba(34,197,94,0.08), rgba(34,197,94,0.03));
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,0.25);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.hidden{display:none;}

.claim-btn{
  display:inline-block;
  margin-top:12px;
  padding:14px 18px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#0a0a0a;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 8px 24px rgba(34,197,94,0.35);
}

.footer{
  width:100%;
  max-width:560px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}