*{margin:0;padding:0;box-sizing:border-box}
body{
  background: linear-gradient(135deg, #16222A 0%, #3A6073 100%);
  color: #fff;
  font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
  min-height: 100vh;
}
.container{max-width: 420px; margin: 0 auto; padding: 20px 15px;}
.card{
  background: rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  margin: 16px 0;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
}
h2{text-align: center; margin-bottom: 20px; font-size: 22px; color: #ffd369;}
h3{margin: 10px 0 15px; font-size: 18px;}
input,select{
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 15px;
}
input::placeholder{color: rgba(255,255,255,0.6);}
.btn{
  width: 100%;
  padding: 13px;
  margin: 12px 0;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #ff5722, #ff9800);
  box-shadow: 0 4px 15px rgba(255,87,34,0.3);
  transition: all 0.2s;
}
.btn:active{transform: scale(0.98);}
.option{
  background: rgba(255,255,255,0.1);
  padding: 14px;
  border-radius: 12px;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.2s;
}
.option.active{background: linear-gradient(90deg,#ff5722,#ff9800);}
.load-icon{font-size: 60px; animation: fire 1s infinite alternate;}
@keyframes fire{0%{transform: scale(1)}100%{transform: scale(1.1)}}
.wheel-box{width: 320px; height: 320px; margin: 30px auto; position: relative;}
.wheel{
  width: 100%;height: 100%;border-radius: 50%;
  background: conic-gradient(#ff5722 20%,#ff9800 20% 40%,#ffd369 40% 60%,#4CAF50 60% 80%,#9C27B0 80%);
  transition: transform 4s cubic-bezier(0.17,0.67,0.13,0.99);
}
.center{
  width: 80px;height: 80px;background: #fff;border-radius: 50%;
  position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
  color: #333;display: flex;align-items: center;justify-content: center;font-weight: bold;
}