/* =========================================================================
   DAILY FREE SPIN

   The wheel is eight CSS wedges on one rotating disc, not an image and not
   a canvas: it has to be sharp on a 3x phone screen, it has to work with
   the site's own colours, and nobody should be waiting on a 200 KB
   graphic before they can press the button.

   The result is decided BEFORE the animation starts (see spin.js) and the
   disc is simply turned to the matching wedge. Doing it the other way
   round - spinning first and reading the angle afterwards - is how a
   wheel ends up paying a prize the player never saw it land on.
   ========================================================================= */

.spbody { background: var(--ocean-900); }
.spmain { padding: 26px 0 60px; }

.sp-head { text-align: center; margin-bottom: 22px; }
.sp-head h1 { font-size: 27px; margin: 0 0 8px; }
.sp-head .sub { max-width: 440px; margin: 0 auto; font-size: 14.5px; line-height: 1.6; }

/* ── The wheel ───────────────────────────────────────────────────────── */
.sp-stage {
  position: relative;
  width: min(330px, 86vw);
  aspect-ratio: 1;
  margin: 0 auto;
}

.sp-wheel {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #f59e0b;
  box-shadow: 0 0 0 4px rgba(255,255,255,.14),
              0 18px 40px rgba(0,0,0,.55),
              inset 0 0 40px rgba(0,0,0,.35);
  transform: rotate(0deg);
  will-change: transform;
}

/* Each wedge is a quarter of the stage, pinned by its bottom-left
   corner to the centre of the disc and clipped to the 45 degree
   triangle between twelve o'clock and half past one. Rotating that by
   45 degrees eight times tiles the circle exactly once - a wider clip
   would make the wedges overlap into a star. The corners that poke
   outside the circle are cut off by the disc's own overflow. */
.sp-seg {
  position: absolute; left: 50%; top: 0;
  width: 50%; height: 50%;
  transform-origin: 0 100%;
  clip-path: polygon(0 100%, 0 0, 100% 0);
}
/* A hairline between neighbours, so the two blues never read as one
   fat wedge. */
.sp-seg::after {
  content: ''; position: absolute;
  left: 0; bottom: 0; width: 1.5px; height: 100%;
  background: rgba(0,0,0,.34);
}
.sp-seg b {
  position: absolute;
  left: 31%; top: 24%;
  /* Out near the rim, on the wedge's own bisector, turned to read
     outwards from the hub the way a fairground wheel does. */
  transform: translate(-50%, -50%) rotate(-67.5deg);
}
/* A label on the left of the disc would otherwise stand on its head.
   Turning it half way round makes it read from the rim inwards, which
   is the right way up for a reader. spin.js decides which ones. */
.sp-seg.sp-flip b {
  transform: translate(-50%, -50%) rotate(112.5deg);
  font-size: 17px; font-weight: 800;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45);
  white-space: nowrap;
}
.sp-seg.sp-again b { font-size: 12.5px; letter-spacing: .4px; }
.sp-seg.hit { filter: brightness(1.45) saturate(1.2); }

/* The pointer, at twelve o'clock. */
.sp-pin {
  position: absolute; left: 50%; top: -10px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 26px solid #fbbf24;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
  z-index: 4;
}

.sp-hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--sea-grad);
  border: 4px solid #f59e0b;
  display: grid; place-items: center;
  font-size: 26px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  z-index: 3;
}

/* Rim lights, lit only while the wheel is turning. */
.sp-rim { position: absolute; inset: -14px; border-radius: 50%; z-index: 2; pointer-events: none; }
.sp-rim i {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50%;
  background: rgba(251,191,36,.35);
}
.sp-rim.on i { animation: spRim .7s linear infinite; }
.sp-rim.on i:nth-child(2n) { animation-delay: .35s; }
@keyframes spRim {
  0%, 100% { background: rgba(251,191,36,.3); box-shadow: none; }
  50%      { background: #fde68a; box-shadow: 0 0 12px #fbbf24; }
}

/* ── Button and status ───────────────────────────────────────────────── */
.sp-act { text-align: center; margin: 26px auto 0; max-width: 420px; }
.sp-go { width: 100%; max-width: 330px; padding: 15px; font-size: 17px; }
.sp-go:disabled { opacity: .55; }
.sp-sub { margin: 12px 0 0; font-size: 14px; color: var(--ink-mute); }
.sp-sub .sp-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800; color: var(--gold);
}
.sp-bal { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-mute); }
.sp-bal b { color: var(--palm); }

.sp-note {
  max-width: 560px; margin: 34px auto 0;
  background: var(--ocean-700); border: 1px solid var(--ocean-600);
  border-radius: 16px; padding: 18px 20px;
}
.sp-note b { display: block; margin-bottom: 8px; }
.sp-note ul { margin: 0; padding-left: 20px; }
.sp-note li { font-size: 14px; line-height: 1.7; color: var(--ink-mute); }

/* ── Sign-in gate and result, both full-screen ───────────────────────── */
.sp-gate, .sp-res {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(4,18,28,.92);
  display: grid; place-items: center; padding: 24px 18px;
}
.sp-gate[hidden], .sp-res[hidden] { display: none; }
.sp-gate-card, .sp-res-card {
  width: 100%; max-width: 390px; text-align: center;
  background: var(--ocean-700); border: 1px solid var(--ocean-600);
  border-radius: 18px; padding: 28px 22px 22px;
}
.sp-gate-ico, .sp-res-ico { font-size: 46px; line-height: 1; margin-bottom: 10px; }
.sp-gate-card h2, .sp-res-card h2 { font-size: 21px; margin: 0 0 10px; }
.sp-gate-card p, .sp-res-card p {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 18px;
}
.sp-gate-card .btn, .sp-res-card .btn { width: 100%; padding: 13px; }
.sp-gate-back, .sp-res-wallet {
  display: inline-block; margin-top: 14px;
  font-size: 13.5px; color: var(--ink-mute);
}
.sp-res-amt {
  font-size: 44px; font-weight: 900; color: var(--gold);
  margin: 0 0 10px; text-shadow: 0 4px 18px rgba(251,191,36,.35);
}