/*!
 * assets/wheel.css — 大转盘样式
 */

.wheel-overlay{
  position:fixed;inset:0;z-index:9200;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(4,4,10,.86);backdrop-filter:blur(6px);
}
.wheel-panel{
  position:relative;width:100%;max-width:400px;max-height:92vh;overflow:auto;
  padding:1.3rem 1.1rem 1.1rem;border-radius:24px;
  background:radial-gradient(120% 80% at 50% 0%,#1d2440 0%,#0c0c16 70%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 1px rgba(0,224,164,.1) inset;
  text-align:center;animation:wheelPop .26s cubic-bezier(.2,1.2,.4,1);
}
@keyframes wheelPop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}

.wheel-panel__close{
  position:absolute;top:.6rem;right:.7rem;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:1.3rem;line-height:1;color:#c9cde0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
}
.wheel-panel__close:hover{background:rgba(255,255,255,.14);color:#fff}

.wheel-panel__head{margin-bottom:.9rem}
.wheel-panel__kicker{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#ffd166;background:rgba(255,209,102,.13);border:1px solid rgba(255,209,102,.35);
  padding:.22rem .55rem;border-radius:999px;margin-bottom:.5rem;
}
.wheel-panel__head h2{margin:.1rem 0 .2rem;font-size:1.35rem;letter-spacing:-.01em}
.wheel-panel__sub{margin:0;font-size:.78rem;color:#9aa0b8}

/* ---------- stage ---------- */
.wheel-stage{
  position:relative;width:100%;aspect-ratio:1/1;max-width:320px;margin:.4rem auto .6rem;
  display:grid;place-items:center;
}
.wheel-pointer{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:1.5rem;color:#ff3d78;line-height:1;
  filter:drop-shadow(0 3px 8px rgba(255,61,120,.7));
}
.wheel-disk{
  position:relative;width:100%;height:100%;border-radius:50%;
  border:6px solid #2a3358;
  box-shadow:0 0 0 3px rgba(0,224,164,.28),0 18px 44px rgba(0,0,0,.6),0 0 44px rgba(0,224,164,.12) inset;
  will-change:transform;overflow:hidden;
}
.wheel-rim{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.1) inset,0 0 30px rgba(0,0,0,.5) inset;
}

.wheel-seg{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-origin:0 0;pointer-events:none;
}
.wheel-seg__text{
  position:absolute;left:-52px;top:-108px;width:104px;
  font-size:.62rem;font-weight:800;line-height:1.15;letter-spacing:.01em;
  color:#eef1ff;text-align:center;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}

/* ---------- spin button ---------- */
.wheel-spin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30%;aspect-ratio:1/1;border-radius:50%;z-index:4;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff,#ffd166 35%,#ff8a3d 70%,#ff3d78);
  color:#2a1200;font-weight:900;letter-spacing:.04em;
  border:3px solid #fff;
  box-shadow:0 8px 24px rgba(255,61,120,.5),0 0 0 4px rgba(0,0,0,.25);
  transition:transform .15s ease,box-shadow .2s ease;
}
.wheel-spin:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.05)}
.wheel-spin:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}
.wheel-spin:disabled{filter:grayscale(.55) brightness(.8);cursor:not-allowed}
.wheel-spin__label{font-size:.78rem;font-weight:900;line-height:1}
@media(min-width:380px){.wheel-spin__label{font-size:.92rem}}

/* ---------- result ---------- */
.wheel-result{margin-top:.2rem}
.wheel-result__title{font-size:1.05rem;font-weight:800;color:#00e0a4;margin-bottom:.2rem}
.wheel-result__sub{font-size:.76rem;color:#9aa0b8;margin-bottom:.6rem}
.wheel-result__btn{width:100%;max-width:220px}

.wheel-panel__fine{margin:.75rem 0 0;font-size:.64rem;color:#6e7590;line-height:1.45}

@media(max-width:360px){
  .wheel-panel{padding:1rem .8rem .9rem}
  .wheel-panel__head h2{font-size:1.15rem}
  .wheel-seg__text{font-size:.55rem;width:92px;left:-46px;top:-96px}
}