.maw-spin-wrapper {
  display:flex;
  justify-content:center;
  padding:28px 16px;
}
.maw-spin-card {
  width:100%;
  max-width:820px;
  text-align:center;
  padding:26px 20px 34px;
  border-radius:34px;
  background:linear-gradient(180deg,#faf7ea 0%,#fffdf5 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}
.maw-spin-header h2 {
  margin:10px 0 18px;
  font-size:clamp(28px,4vw,42px);
  line-height:1.05;
}
.maw-mode {
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.maw-mode-test { background:#fff0bf; color:#8a6500; }
.maw-mode-published { background:#def8db; color:#17612d; }
.maw-spin-notice {
  margin:0 auto 18px;
  max-width:540px;
  padding:12px 16px;
  border-radius:14px;
  background:#f2f2f2;
}
.maw-spin-warning { background:#ffe8e8; color:#9a1111; }
.maw-wheel-stage {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px auto 20px;
  width:100%;
  max-width:640px;
  box-sizing:border-box;
}
.maw-wheel-box {
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:1 / 1;
  margin:0 auto;
}
.maw-wheel-rotor {
  position:relative;
  width:100%;
  height:100%;
  transition:transform 5.6s cubic-bezier(.12,.8,.1,1);
  will-change:transform;
}
.maw-wheel-canvas {
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.22));
}
.maw-wheel-center {
  position:absolute;
  left:50%;
  top:50%;
  width:14%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #4f4f4f 0%, #111 52%, #2a2a2a 100%);
  border:4px solid #ffc35a;
  box-shadow:0 0 0 4px #ff54bf inset;
}
.maw-wheel-pointer {
  position:absolute;
  left:50%;
  top:-4%;
  width:8%;
  height:18%;
  transform:translateX(-50%);
  z-index:4;
}
.maw-wheel-pointer::before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:58%;
  height:62%;
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#ffe24d 0%,#ff52be 55%,#7b57ff 100%);
}
.maw-wheel-pointer::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:26px solid #ff8f1f;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.18));
}
.maw-wheel-shadow {
  position:absolute;
  left:50%;
  bottom:-2%;
  width:70%;
  height:10%;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 72%);
  filter:blur(16px);
}
.maw-spin-button {
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,#181818 0%,#020202 100%);
  color:#fff;
  padding:16px 32px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.maw-spin-button[disabled] {
  opacity:.55;
  cursor:not-allowed;
}
.maw-spin-meta {
  margin-top:14px;
  color:#5e5e5e;
  font-weight:600;
}
.maw-spin-modal {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,10,10,.58);
  z-index:99999;
  padding:20px;
}
.maw-spin-modal.is-open { display:flex; }
.maw-spin-modal__content {
  position:relative;
  width:min(560px,100%);
  overflow:hidden;
  background:linear-gradient(180deg,#fff8eb 0%,#ffffff 100%);
  border-radius:28px;
  padding:42px 28px 34px;
  text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.maw-spin-modal__burst {
  position:absolute;
  inset:auto;
  top:-90px;
  left:50%;
  width:220px;
  height:220px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,217,0,.9) 0%, rgba(255,91,195,.28) 44%, rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.maw-spin-modal__content h3 {
  margin:0 0 10px;
  font-size:34px;
}
.maw-spin-modal__content p {
  margin:0;
  font-size:19px;
  line-height:1.45;
}
.maw-spin-modal__close {
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:transparent;
  font-size:30px;
  cursor:pointer;
}
@media (max-width: 640px) {
  .maw-spin-wrapper { padding:20px 10px; }
  .maw-spin-card { padding:22px 12px 26px; }
  .maw-wheel-stage {
    max-width:min(calc(100vw - 44px), 420px);
  }
  .maw-wheel-pointer::after {
    border-left-width:12px;
    border-right-width:12px;
    border-top-width:18px;
  }
  .maw-spin-modal__content h3 { font-size:28px; }
  .maw-spin-modal__content p { font-size:17px; }
}