/* ============================================================
   SPINIA — Free-Spins Wheel (launcher + modal).  Prefix sp-fw
   Styled to the SPINIA logo: purple disc, navy ring, logo colours.
   ============================================================ */

/* the 8 logo colours, in wheel order */
:root{
  --sp-fw-grad: conic-gradient(
    var(--sp-green)   0deg  45deg,
    var(--sp-lime)   45deg  90deg,
    var(--sp-amber)  90deg 135deg,
    var(--sp-orange)135deg 180deg,
    var(--sp-red)   180deg 225deg,
    var(--sp-magenta)225deg 270deg,
    var(--sp-blue)  270deg 315deg,
    var(--sp-indigo)315deg 360deg);
}

/* ---------- Launcher (bottom-RIGHT) ------------------------------------ */
/* `translate`/`scale` are animated as INDEPENDENT properties so the bob
   animation and the hover scale can coexist (a `transform` would clobber). */
.sp-fw-launch{position:fixed;right:20px;bottom:20px;z-index:70;border:0;cursor:pointer;
  width:116px;height:116px;border-radius:50%;padding:0;background:none;
  filter:drop-shadow(0 12px 26px rgba(79,85,167,.45));
  animation:sp-fw-bob 2.8s ease-in-out infinite;
  transition:opacity .3s,scale .18s,visibility .3s}
.sp-fw-launch:hover{scale:1.06}
.sp-fw-launch.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.sp-fw-launch__disc{position:absolute;inset:0;border-radius:50%;background:var(--sp-fw-grad);
  animation:sp-fw-slowspin 11s linear infinite;
  box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 9px var(--sp-navy)}
.sp-fw-launch__badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:#fff;text-align:center;line-height:1;pointer-events:none}
.sp-fw-launch__badge i{position:absolute;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#8a6bf0,var(--sp-violet));box-shadow:0 3px 10px rgba(0,0,0,.35)}
.sp-fw-launch__badge b{position:relative;font-size:1.55rem;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.sp-fw-launch__badge span{position:relative;font-size:.5rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sp-fw-launch__pin{position:absolute;top:-5px;left:50%;margin-left:-8px;
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid var(--sp-red);z-index:2}
@keyframes sp-fw-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes sp-fw-slowspin{to{transform:rotate(360deg)}}

/* ---------- Modal ------------------------------------------------------- */
.sp-fw-overlay{position:fixed;inset:0;background:rgba(16,36,68,.76);backdrop-filter:blur(4px);
  z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;
  overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sp-fw-overlay.open{opacity:1;visibility:visible}
.sp-fw-modal{background:linear-gradient(180deg,#fff,#f4f2fb);border-radius:26px;max-width:404px;width:100%;
  padding:26px 22px 24px;text-align:center;position:relative;box-shadow:var(--sp-shadow-lg);
  border-top:6px solid var(--sp-violet);
  margin:auto;max-height:calc(100vh - 36px);overflow-y:auto;
  transform:translateY(14px) scale(.97);transition:transform .28s}
.sp-fw-overlay.open .sp-fw-modal{transform:none}
.sp-fw-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:10px;
  background:#efecfa;color:#5b3fa8;font-size:1.2rem;cursor:pointer;z-index:5}
.sp-fw-modal h3{margin:0 0 2px;color:var(--sp-navy);font-size:1.35rem;font-weight:900}
.sp-fw-modal p.sp-fw-sub{margin:0 0 16px;color:var(--sp-muted);font-size:.9rem}

.sp-fw-wheelwrap{position:relative;width:272px;height:272px;margin:6px auto 10px;max-width:100%}
.sp-fw-pointer{position:absolute;top:-4px;left:50%;margin-left:-13px;z-index:4;
  border-left:13px solid transparent;border-right:13px solid transparent;border-top:22px solid var(--sp-red);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.sp-fw-wheel{width:100%;height:100%;border-radius:50%;position:relative;background:var(--sp-fw-grad);
  box-shadow:0 0 0 7px #fff,0 0 0 13px var(--sp-navy),0 16px 36px rgba(16,36,68,.45);
  transition:transform 4.6s cubic-bezier(.16,.84,.3,1)}
.sp-fw-seg{position:absolute;top:50%;left:50%;transform-origin:0 0;color:#fff;font-weight:900;
  font-size:.98rem;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.sp-fw-seg span{display:block;transform:translate(-50%,-50%);white-space:nowrap}
.sp-fw-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;
  border-radius:50%;background:radial-gradient(circle at 32% 28%,#8a6bf0,var(--sp-violet));z-index:3;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.85)}
.sp-fw-hub span{font-family:'Arial Black',Arial,sans-serif;color:#fff;font-weight:900;font-size:1.6rem}

.sp-fw-spin{margin-top:4px}
.sp-fw-spin[aria-disabled="true"]{opacity:.55;pointer-events:none}
.sp-fw-result{margin-top:14px;display:none}
.sp-fw-result.show{display:block;animation:sp-fw-pop .4s ease}
.sp-fw-result__prize{font-size:1.5rem;font-weight:900;color:#5b3fa8}
.sp-fw-result p{margin:4px 0 12px;color:var(--sp-muted);font-size:.9rem}
@keyframes sp-fw-pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.sp-fw-legal{margin-top:12px;font-size:.7rem;color:var(--sp-muted)}

@media(max-width:480px){
  .sp-fw-launch{width:92px;height:92px;right:12px;bottom:12px}
  .sp-fw-launch__badge b{font-size:1.25rem}
  .sp-fw-launch__badge i{width:46px;height:46px}
  .sp-fw-wheelwrap{width:232px;height:232px}
}
@media(prefers-reduced-motion:reduce){
  .sp-fw-launch,.sp-fw-launch__disc{animation:none}
  .sp-fw-wheel{transition:transform .01s linear}
  .sp-fw-modal{transition:none}
}