/* =====================================================================
   SPINGAME — Premium reward experience
   Mobile-first. Black + champagne gold. No external UI frameworks.
   ===================================================================== */

/* ------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------ */
:root {
  /* Cinematic blacks */
  --bg:            #050505;
  --bg-2:          #080808;
  --bg-3:          #0B0B0B;
  --card:          #141414;
  --card-hover:    #1B1B1B;

  /* Metallic gold ramp */
  --gold:          #C9A227;
  --gold-bright:   #E6C766;
  --gold-spark:    #FFD978;
  --champagne:     #FFF1B8;

  --text:          #FFFFFF;
  --text-soft:     #F8F8F8;
  --text-2:        #A7A7A7;
  --text-3:        #6E6E6E;
  --success:       #39D98A;
  --error:         #FF5C5C;

  /* Jewel tones used by the wheel segments (set per-segment from JS) */
  --jewel-champagne: #6B5A26;
  --jewel-ruby:      #6E1226;
  --jewel-emerald:   #0E4A38;
  --jewel-sapphire:  #123A78;
  --jewel-green:     #2E5416;
  --jewel-purple:    #43206B;

  --border:        rgba(201, 162, 39, 0.22);
  --border-soft:   rgba(255, 255, 255, 0.07);
  --gold-grad:     linear-gradient(135deg, #FFF1B8 0%, #E6C766 42%, #C9A227 100%);
  --gold-grad-v:   linear-gradient(180deg, #FFF1B8 0%, #E6C766 30%, #C9A227 62%, #8E6E14 100%);

  --ease-lux:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spin:     cubic-bezier(0.16, 0.84, 0.24, 1);
  /* Long, weighty deceleration with a soft settle at the end */
  --ease-decel:    cubic-bezier(0.12, 0.78, 0.14, 1);

  --radius:        18px;
  --radius-sm:     12px;
  --shell:         460px;
  --font-display:  'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --font-body:     'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --shadow-card:   0 24px 60px -30px rgba(0, 0, 0, 0.95);
  --shadow-gold:   0 0 0 1px rgba(201, 162, 39, 0.22), 0 18px 46px -24px rgba(201, 162, 39, 0.55);

  /* Wheel sizing: one token drives the wheel, rim, bulbs and pointer so
     everything stays concentric at every viewport. */
  --wheel-size:    min(84vw, 318px);
  --wheel-rim:     clamp(11px, 3.1vw, 19px);
  --bulb-count:    20;
}

/* ------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Decorative glows sit wider than the viewport on purpose.
     `clip` removes that scrollable overflow without creating a
     scroll container, so position:fixed children keep working. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100svh;
  /* Layered cinematic base: charcoal lift at the top, gold bloom at the
     horizon, deep black at the edges. */
  background:
    radial-gradient(85% 55% at 50% 34%, rgba(201, 162, 39, 0.10) 0%, transparent 62%),
    radial-gradient(130% 80% at 50% -14%, #191308 0%, transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 38%, var(--bg-3) 62%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

::selection { background: rgba(201, 162, 39, 0.32); color: #fff; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------
   3. AMBIENT BACKGROUND
   ------------------------------------------------------------------ */
.sg-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.sg-glow--a {
  width: 60vw; height: 60vw; max-width: 420px; max-height: 420px;
  top: -18%; left: -22%;
  background: radial-gradient(circle, rgba(201,162,39,0.20), transparent 70%);
  animation: sgDrift 22s ease-in-out infinite alternate;
}
.sg-glow--b {
  width: 55vw; height: 55vw; max-width: 380px; max-height: 380px;
  bottom: -14%; right: -20%;
  background: radial-gradient(circle, rgba(230,199,102,0.14), transparent 70%);
  animation: sgDrift 27s ease-in-out infinite alternate-reverse;
}

/* Soft gold light rays fanning out from behind the wheel */
.sg-rays {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 190vmax;
  height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  opacity: 0.30;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 217, 120, 0.055) 0deg 3deg,
    transparent 3deg 11deg
  );
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0.9) 6%, rgba(0,0,0,0.35) 30%, transparent 62%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,0.9) 6%, rgba(0,0,0,0.35) 30%, transparent 62%);
  animation: sgRayTurn 140s linear infinite;
}

/* Slow-drifting gold motes, populated by app.js */
.sg-motes {
  position: absolute;
  inset: 0;
}
.sg-mote {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 217, 120, 0.85);
  box-shadow: 0 0 6px rgba(255, 217, 120, 0.7);
  opacity: 0;
  animation: sgMoteFloat var(--dur, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* Corner vignette to focus attention on the centre */
.sg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 42%, transparent 34%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.86) 100%);
}

.sg-grain {
  position: absolute; inset: -50%;
  opacity: 0.045;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.06) 0 1px, transparent 1px 3px);
}

@keyframes sgDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14%, 10%, 0) scale(1.14); }
}

@keyframes sgRayTurn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sgMoteFloat {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  12%  { opacity: 0.55; }
  50%  { opacity: 0.30; transform: translate3d(14px, -38vh, 0) scale(1); }
  88%  { opacity: 0; transform: translate3d(-10px, -76vh, 0) scale(0.7); }
  100% { opacity: 0; }
}

/* ------------------------------------------------------------------
   4. SHELL + SCREENS
   ------------------------------------------------------------------ */
.sg-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(22px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.sg-screen { display: none; flex: 1; flex-direction: column; }
.sg-screen.is-active { display: flex; animation: sgScreenIn 520ms var(--ease-lux) both; }

@keyframes sgScreenIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   5. BRAND
   ------------------------------------------------------------------ */
.sg-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(26px, 7vw, 46px);
  animation: sgFadeIn 700ms var(--ease-lux) both;
  position: relative;
}

/* Soft champagne bloom behind the wordmark */
.sg-brand::before {
  content: '';
  position: absolute;
  top: -26px;
  left: 50%;
  width: 230px;
  height: 92px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 217, 120, 0.20), rgba(201, 162, 39, 0.07) 46%, transparent 70%);
  filter: blur(12px);
  animation: sgLogoBreathe 5.5s ease-in-out infinite;
}

.sg-brand__mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  position: relative;
}
.sg-brand__icon {
  width: 40px; height: 40px;
  filter: drop-shadow(0 0 14px rgba(255, 217, 120, 0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.9));
  animation: sgSpinSlow 22s linear infinite;
}
.sg-brand__word {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  /* Metallic champagne, brightest across the top edge */
  background: linear-gradient(180deg, #FFF7DC 0%, #FFD978 34%, #C9A227 74%, #FFF1B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 34px rgba(201, 162, 39, 0.45);
}
.sg-brand__word em {
  font-style: normal;
  color: var(--text-soft);
  -webkit-text-fill-color: var(--text-soft);
  font-weight: 300;
  letter-spacing: 0.28em;
}

@keyframes sgSpinSlow { to { transform: rotate(360deg); } }
@keyframes sgLogoBreathe {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}

.sg-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-spark);
  opacity: 0.92;
  text-shadow: 0 0 18px rgba(201, 162, 39, 0.45);
}
.sg-eyebrow--center { text-align: center; margin-bottom: 12px; }

/* ------------------------------------------------------------------
   6. HERO / TYPOGRAPHY
   ------------------------------------------------------------------ */
.sg-hero { text-align: center; margin-bottom: clamp(22px, 6vw, 34px); }

.sg-display {
  font-size: clamp(34px, 9.2vw, 46px);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #FFFFFF 20%, #E8DCB4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sgRiseIn 760ms var(--ease-lux) 90ms both;
}

.sg-title {
  font-size: clamp(28px, 7.4vw, 34px);
  line-height: 1.12;
  margin-bottom: 10px;
  color: #fff;
  animation: sgRiseIn 700ms var(--ease-lux) both;
}
.sg-title--center { text-align: center; }

/* Campaign-scale headline for the spin screen */
.sg-title--hero {
  font-size: clamp(30px, 9.2vw, 46px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  background: linear-gradient(178deg, #FFFFFF 8%, #FFF1B8 44%, #E6C766 72%, #C9A227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(201, 162, 39, 0.28);
}

.sg-spinhead {
  text-align: center;
  margin-bottom: clamp(10px, 3vw, 18px);
}

/* Hairline rule with a gold node, under the headline */
.sg-spinhead__rule {
  display: block;
  width: 132px;
  height: 1px;
  margin: 16px auto 0;
  position: relative;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.75), transparent);
}
.sg-spinhead__rule::after {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  transform: rotate(45deg);
  background: var(--gold-bright);
  box-shadow: 0 0 10px rgba(255, 217, 120, 0.9);
}

.sg-lede {
  font-size: 14.5px;
  color: var(--text-2);
  max-width: 34ch;
  margin: 0 auto;
  animation: sgRiseIn 700ms var(--ease-lux) 160ms both;
}

.sg-masked {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold-bright);
  opacity: 0.9;
}

@keyframes sgRiseIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes sgFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------
   7. CARD + FORM
   ------------------------------------------------------------------ */
.sg-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)) ,
    var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 20px 24px;
  box-shadow: var(--shadow-card);
  animation: sgRiseIn 700ms var(--ease-lux) 220ms both;
  transition: border-color 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), background 0.4s var(--ease-lux);
}
.sg-card:hover,
.sg-card:focus-within {
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)), var(--card-hover);
  box-shadow: var(--shadow-gold);
}

.sg-field { margin-bottom: 18px; }

.sg-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}

.sg-input {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  background: #0B0B0B;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15.5px;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  transition: border-color 0.28s var(--ease-lux), box-shadow 0.28s var(--ease-lux), background 0.28s var(--ease-lux);
  appearance: none;
}
.sg-input::placeholder { color: #4A4A4A; letter-spacing: 0.04em; }
.sg-input:hover { border-color: rgba(201, 162, 39, 0.28); }
.sg-input:focus {
  outline: none;
  background: #0E0E0E;
  border-color: rgba(201, 162, 39, 0.62);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12), 0 0 22px -8px rgba(201, 162, 39, 0.6);
}
.sg-input.is-invalid {
  border-color: rgba(255, 92, 92, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.10);
}

.sg-input-group { position: relative; display: flex; align-items: center; }
.sg-prefix {
  position: absolute;
  left: 15px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  pointer-events: none;
}
.sg-input-group .sg-input { padding-left: 52px; letter-spacing: 0.12em; }

.sg-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 7px;
  min-height: 0;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s var(--ease-lux), transform 0.25s var(--ease-lux);
}
.sg-hint.is-shown { opacity: 1; transform: none; }
.sg-hint.is-error { color: var(--error); }

.sg-fineprint {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------------ */
.sg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s var(--ease-lux), box-shadow 0.32s var(--ease-lux),
              background 0.32s var(--ease-lux), border-color 0.32s var(--ease-lux), opacity 0.2s linear;
}
.sg-btn + .sg-btn { margin-top: 10px; }
.sg-btn:active { transform: translateY(1px) scale(0.995); }
.sg-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.sg-btn__label { position: relative; z-index: 2; }

.sg-btn--gold {
  background: var(--gold-grad);
  color: #14110A;
  box-shadow: 0 14px 34px -18px rgba(201, 162, 39, 0.85);
}
.sg-btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,0.55) 48%, transparent 78%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-lux);
}
.sg-btn--gold:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px -16px rgba(201, 162, 39, 0.95);
}
.sg-btn--gold:hover:not([disabled])::after { transform: translateX(120%); }

.sg-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-2);
}
.sg-btn--ghost:hover:not([disabled]) {
  border-color: var(--border);
  color: var(--champagne);
  background: rgba(201, 162, 39, 0.06);
}

.sg-btn--outline {
  width: auto;
  min-height: 44px;
  padding: 11px 22px;
  background: rgba(201, 162, 39, 0.08);
  border-color: var(--border);
  color: var(--champagne);
}
.sg-btn--outline:hover { background: rgba(201, 162, 39, 0.16); border-color: rgba(201,162,39,0.5); }

.sg-btn--lg { min-height: 56px; font-size: 13.5px; margin-top: 6px; }
.sg-btn--sm { font-size: 11px; letter-spacing: 0.18em; }

/* Primary CTA on the spin screen - the loudest element on the page */
.sg-btn--cta {
  min-height: 58px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.26em;
  padding: 16px 30px;
  border-radius: 16px;
  margin-top: 0;
  background:
    linear-gradient(180deg, #FFF7DC 0%, #FFD978 18%, #E6C766 46%, #C9A227 74%, #9C7A1A 100%);
  border: 1px solid rgba(255, 247, 220, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 0 4px rgba(201, 162, 39, 0.14),
    0 18px 44px -18px rgba(255, 217, 120, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -3px 10px rgba(120, 88, 10, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}
.sg-btn__arrow {
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.32s var(--ease-lux);
}
.sg-btn--cta:hover .sg-btn__arrow { transform: translateX(4px); }

@media (hover: hover) {
  .sg-btn--cta:hover:not([disabled]) {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.55),
      0 0 0 5px rgba(201, 162, 39, 0.20),
      0 24px 56px -18px rgba(255, 217, 120, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -3px 10px rgba(120, 88, 10, 0.45);
  }
}
.sg-btn--cta:active:not([disabled]) { transform: translateY(1px) scale(0.985); }

/* Idle sheen that crosses the CTA every few seconds */
.sg-btn--cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%);
  transform: translateX(-130%);
  animation: sgCtaSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
.sg-btn--cta:hover::after { animation-duration: 2.4s; }
@keyframes sgCtaSheen {
  0%, 62%  { transform: translateX(-130%); }
  82%      { transform: translateX(130%); }
  100%     { transform: translateX(130%); }
}

/* Once the spin is spent the CTA becomes a quieter but clearly actionable
   plate: still gold-edged and lit, just no longer the loud primary action. */
.sg-btn--cta.is-secondary {
  background:
    linear-gradient(180deg, rgba(255, 241, 184, 0.14) 0%, rgba(201, 162, 39, 0.07) 48%, rgba(201, 162, 39, 0.04) 100%);
  border: 1px solid rgba(201, 162, 39, 0.55);
  color: var(--champagne);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(201, 162, 39, 0.10),
    0 0 26px -12px rgba(255, 217, 120, 0.55),
    inset 0 1px 0 rgba(255, 247, 220, 0.18);
  text-shadow: none;
  cursor: pointer;
}
.sg-btn--cta.is-secondary::after { animation-duration: 7s; }
@media (hover: hover) {
  .sg-btn--cta.is-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 217, 120, 0.8);
    background:
      linear-gradient(180deg, rgba(255, 241, 184, 0.22) 0%, rgba(201, 162, 39, 0.12) 48%, rgba(201, 162, 39, 0.06) 100%);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      0 0 0 5px rgba(201, 162, 39, 0.16),
      0 0 40px -10px rgba(255, 217, 120, 0.8),
      inset 0 1px 0 rgba(255, 247, 220, 0.26);
  }
}
.sg-btn--cta.is-secondary:active { transform: translateY(1px) scale(0.99); }
.sg-btn--cta.is-secondary .sg-btn__arrow {
  color: var(--gold-spark);
  filter: drop-shadow(0 0 6px rgba(255, 217, 120, 0.7));
}

/* Loading state */
.sg-btn.is-loading .sg-btn__label { opacity: 0.35; }
.sg-btn.is-loading { pointer-events: none; }
.sg-spinner {
  position: absolute;
  width: 17px; height: 17px;
  border: 2px solid rgba(20, 17, 10, 0.25);
  border-top-color: #14110A;
  border-radius: 50%;
  opacity: 0;
  animation: sgSpin 0.7s linear infinite;
}
.sg-btn--ghost .sg-spinner,
.sg-btn--outline .sg-spinner {
  border-color: rgba(201, 162, 39, 0.22);
  border-top-color: var(--gold-bright);
}
@keyframes sgSpin { to { transform: rotate(360deg); } }
.sg-btn.is-loading .sg-spinner { opacity: 1; }

.sg-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 10px 4px;
  background: none;
  border: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.25s var(--ease-lux);
}
.sg-back:hover { color: var(--champagne); }

/* ------------------------------------------------------------------
   9. ALERTS / DEV NOTICE
   ------------------------------------------------------------------ */
.sg-alert {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 92, 92, 0.32);
  background: rgba(255, 92, 92, 0.07);
  color: #FFC9C9;
  font-size: 13px;
  line-height: 1.5;
  animation: sgShake 420ms var(--ease-lux);
}
.sg-alert.is-success {
  border-color: rgba(57, 217, 138, 0.34);
  background: rgba(57, 217, 138, 0.07);
  color: #B8F5D6;
}
@keyframes sgShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ------------------------------------------------------------------
   9b. OTP INSTRUCTION LINES (admin-editable, plain text)
   ------------------------------------------------------------------ */
.sg-instruction { margin-bottom: 4px; }
.sg-instruction + .sg-instruction { margin-top: 0; }

/* Visually hidden but announced by screen readers. */
.sg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   10. OTP INPUT
   ------------------------------------------------------------------ */
.sg-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.sg-otp__cell {
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  max-height: 62px;
  padding: 0;
  text-align: center;
  background: #0B0B0B;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  appearance: none;
  transition: border-color 0.24s var(--ease-lux), box-shadow 0.24s var(--ease-lux), transform 0.24s var(--ease-lux), background 0.24s var(--ease-lux);
}
.sg-otp__cell:focus {
  outline: none;
  border-color: rgba(201, 162, 39, 0.65);
  background: #0E0E0E;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12);
}
.sg-otp__cell.is-filled {
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(201, 162, 39, 0.05);
}
.sg-otp.is-error .sg-otp__cell { border-color: rgba(255, 92, 92, 0.55); }

/* ------------------------------------------------------------------
   11. SPIN WHEEL — cinematic prize wheel
   Structure (all children of .sg-wheel-stage):
     .sg-halo      gold bloom behind everything
     .sg-rim       thick metallic outer rim + inner gold rings
     .sg-wheel     rotating jewel face (#wheel)
       .sg-wheel__inner  conic jewel fills + labels (#wheel-inner)
       .sg-wheel__gloss  one global polish layer over the face
       .sg-wheel__hub    physical SPIN button
     .sg-marquee   LED bulbs on the rim circumference
     .sg-pointer   crystal pointer at 12 o'clock
   ------------------------------------------------------------------ */
.sg-wheel-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  /* Reserve room for the rim, the bulbs and the pointer without letting
     anything push the page sideways. */
  padding: calc(var(--wheel-rim) + 10px) 0 calc(var(--wheel-rim) + 20px);
  margin: 6px auto 4px;
  isolation: isolate;
}

/* --- Gold bloom behind the wheel --- */
.sg-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--wheel-size) * 1.62);
  height: calc(var(--wheel-size) * 1.62);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 217, 120, 0.20) 0%, rgba(201, 162, 39, 0.11) 34%, rgba(201, 162, 39, 0.04) 52%, transparent 70%);
  filter: blur(6px);
  transition: opacity 0.6s var(--ease-lux), transform 0.6s var(--ease-lux);
  animation: sgHaloBreathe 6s ease-in-out infinite;
}
.sg-wheel-stage.is-spinning .sg-halo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.16);
  animation-duration: 1.5s;
}
.sg-wheel-stage.is-winner .sg-halo {
  animation: sgHaloWin 2200ms var(--ease-lux);
}
@keyframes sgHaloWin {
  0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  14%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.30); }
  100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes sgHaloBreathe {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}

/* --- Machined outer rim: shadow, dark gold, brushed gold, groove, highlight --- */
.sg-rim {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--wheel-size) + var(--wheel-rim) * 2);
  height: calc(var(--wheel-size) + var(--wheel-rim) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  /* Layer 3+4: bright brushed-gold band with a darker groove toward the
     inside edge, plus fine concentric turning marks like turned brass. */
  background:
    repeating-radial-gradient(
      closest-side,
      rgba(255, 250, 232, 0.05) 0 1px,
      rgba(0, 0, 0, 0.07) 1px 2px,
      rgba(255, 250, 232, 0) 2px 4px
    ),
    radial-gradient(closest-side,
      rgba(0, 0, 0, 0) 0 calc(100% - var(--wheel-rim) * 0.92),
      rgba(46, 36, 10, 0.85) calc(100% - var(--wheel-rim) * 0.80),
      rgba(46, 36, 10, 0.85) calc(100% - var(--wheel-rim) * 0.60),
      rgba(0, 0, 0, 0) calc(100% - var(--wheel-rim) * 0.48)),
    conic-gradient(from 198deg,
      #5A4818 0deg, #C19F33 30deg, #F7EDD4 58deg, #E0C368 86deg,
      #7C6522 120deg, #4A3B12 156deg, #74601E 194deg,
      #D8BC5E 238deg, #FFF8E8 272deg, #C7A93C 306deg, #5A4818 360deg);
  box-shadow:
    /* Layer 2: dark outer keyline */
    0 0 0 1px rgba(0, 0, 0, 0.9),
    /* Layer 5: thin champagne highlight along the top lip */
    inset 0 1px 1px rgba(255, 247, 222, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8),
    /* Layer 1: dark outer shadow beneath the wheel */
    0 22px 48px -22px rgba(0, 0, 0, 1),
    0 0 52px -16px rgba(201, 162, 39, 0.4);
  transition: box-shadow 0.5s var(--ease-lux);
}

/* Specular sweep that travels round the rim while the wheel turns.
   Masked to the rim band so it never bleeds onto the wheel face. */
.sg-rim__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg,
    rgba(255, 251, 235, 0) 0deg,
    rgba(255, 251, 235, 0.5) 26deg,
    rgba(255, 241, 184, 0.08) 60deg,
    rgba(255, 251, 235, 0) 110deg,
    rgba(255, 251, 235, 0) 250deg,
    rgba(255, 251, 235, 0.34) 296deg,
    rgba(255, 251, 235, 0) 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - var(--wheel-rim)), #000 calc(100% - var(--wheel-rim)));
  mask-image: radial-gradient(closest-side, transparent calc(100% - var(--wheel-rim)), #000 calc(100% - var(--wheel-rim)));
}
.sg-wheel-stage.is-spinning .sg-rim__sheen {
  opacity: 0.85;
  animation: sgRimSpin 1500ms linear infinite;
}
@keyframes sgRimSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Idle: a very slow, barely-there drift so the metal is never dead */
.sg-wheel-stage:not(.is-spinning) .sg-rim__sheen {
  opacity: 0.30;
  animation: sgRimSpin 42s linear infinite;
}

/* Layer 4b: the inner gold ring that seats the wheel face */
.sg-rim::before {
  content: '';
  position: absolute;
  inset: calc(var(--wheel-rim) * 0.46);
  border-radius: 50%;
  background: var(--bg-2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 184, 0.20),
    inset 0 2px 6px rgba(0, 0, 0, 0.95);
}
/* A second hairline ring just inside it, for depth */
.sg-rim::after {
  content: '';
  position: absolute;
  inset: calc(var(--wheel-rim) * 0.80);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 39, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Impact bloom the instant the wheel comes to rest */
.sg-wheel-stage.is-settling .sg-rim {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 1px 1px rgba(255, 250, 235, 0.75),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8),
    0 22px 48px -22px rgba(0, 0, 0, 1),
    0 0 80px -8px rgba(255, 217, 120, 0.7);
}
.sg-wheel-stage.is-settling .sg-halo {
  animation: sgHaloImpact 1100ms var(--ease-lux);
}
@keyframes sgHaloImpact {
  0%   { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
  22%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.42); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.10); }
}

/* --- Rotating enamel face --- */
.sg-wheel {
  position: relative;
  z-index: 3;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  overflow: hidden;
  /* black lacquer showing through at the very edge */
  background: #0A0A0A;
  box-shadow:
    /* inner shadow where the enamel meets the gold ring - scaled so the
       recess reads the same on a 268px phone wheel and a 520px desktop one */
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 calc(var(--wheel-size) * 0.010) calc(var(--wheel-size) * 0.045) rgba(0, 0, 0, 0.55),
    inset 0 0 calc(var(--wheel-size) * 0.14) rgba(0, 0, 0, 0.38);
  transition: box-shadow 0.5s var(--ease-lux);
  touch-action: manipulation;
}
.sg-wheel.is-spinning {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 3px 14px rgba(0, 0, 0, 0.5),
    inset 0 0 44px rgba(0, 0, 0, 0.35),
    0 0 56px -10px rgba(255, 217, 120, 0.35);
}

/* The face is an SVG of wedges, each with its own radial gradient.
   It lives inside #wheel-inner, which still receives the single rotate(). */
.sg-wheel__inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform;
  transform: rotate(0deg);
}

.sg-wheel__svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* One global gloss over the whole face. It follows the circle, has no edges
   of its own, and is the ONLY thing lighting the panels - which is what makes
   them read as polished enamel rather than flat wedges. */
/* The studio light source.
   This layer is a SIBLING of #wheel-inner, never a descendant, so the
   reflection stays anchored to the wheel face while the jewel panels
   rotate underneath it. Verified: its transform is `none` at every point
   in the spin. Do not move it inside #wheel-inner. */
.sg-wheel__gloss {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
  background:
    /* main studio reflection, anchored upper-left and fixed to the face */
    radial-gradient(64% 52% at 26% 11%, rgba(255, 253, 246, 0.30), rgba(255, 253, 246, 0.09) 40%, transparent 66%),
    /* soft bloom through the centre */
    radial-gradient(circle at 50% 50%, rgba(255, 252, 240, 0.13) 0%, rgba(255, 252, 240, 0.04) 30%, transparent 58%),
    /* faint warm bounce from the lower right */
    radial-gradient(48% 38% at 78% 88%, rgba(255, 217, 120, 0.09), transparent 66%),
    /* outer falloff: the panel edge depth */
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.10) 72%, rgba(0, 0, 0, 0.30) 88%, rgba(0, 0, 0, 0.52) 97%, rgba(0, 0, 0, 0.64) 100%);
}

/* ---- Labels ---- */
.sg-seg {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.sg-seg__label {
  position: absolute;
  /* top:18% of the wheel box == 64% of the radius: clear of both the hub
     (21%) and the gold rim, and wide enough that neighbouring labels
     never collide. */
  top: 18%;
  left: 50%;
  width: 27%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  pointer-events: none;
  overflow-wrap: anywhere;
  /* only enough shadow to lift the type off the enamel - no glow */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* First line carries the value: elegant serif */
.sg-seg__label > span:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: #FFF8E8;
}
/* Second line is the qualifier: small, tracked-out sans */
.sg-seg__label > span + span {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(9px, 2.3vw, 10.5px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-indent: 0.18em; /* balance the trailing letter-space */
  color: rgba(255, 241, 184, 0.76);
  margin-top: 3px;
}

/* Labels whose segment rotates past 90 degrees are turned in place, so the
   reward name stays legible as the wheel turns. */
.sg-seg__label.is-flipped {
  transform: translateX(-50%) rotate(180deg);
}

/* Winning wedge: a gold wash that fades up after the wheel settles */
.sg-seg.is-winner { z-index: 6; }
.sg-seg.is-winner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-image: var(--sg-winner, none);
  -webkit-mask-image: var(--sg-wedge-mask, none);
  mask-image: var(--sg-wedge-mask, none);
  opacity: 0;
  animation: sgWinnerGlow 2.6s var(--ease-lux) forwards;
  pointer-events: none;
}
.sg-seg.is-winner .sg-seg__label > span:first-child { color: #FFFDF6; }
.sg-seg.is-winner .sg-seg__label > span + span { color: rgba(255, 241, 184, 0.95); }

@keyframes sgWinnerGlow {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  70%  { opacity: 0.85; }
  100% { opacity: 0.62; }
}

/* The hub is a div[role=button], so the :where() rule above does not match
   it - it needs its own focus ring. */
.sg-wheel__hub:focus { outline: none; }
.sg-wheel__hub:focus-visible {
  outline: 2px solid var(--gold-spark);
  outline-offset: 5px;
  filter: brightness(1.12);
}

/* ---- Centre hub: black lacquer button in a champagne collar ---- */
.sg-wheel__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  width: 21%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  /* deep black lacquer dome */
  background:
    radial-gradient(circle at 38% 28%, #24211C 0%, #131110 38%, #0A0908 72%, #050505 100%);
  box-shadow:
    /* champagne-gold collar */
    0 0 0 1px rgba(46, 36, 12, 0.95),
    0 0 0 2px rgba(214, 194, 132, 0.92),
    0 0 0 3px rgba(70, 55, 18, 0.9),
    0 0 0 5px rgba(6, 6, 6, 0.95),
    /* soft outer bloom */
    0 0 26px -8px rgba(255, 217, 120, 0.45),
    /* deep drop shadow onto the face */
    0 6px 16px -6px rgba(0, 0, 0, 1),
    /* inner shadow at the top of the dome */
    inset 0 3px 8px rgba(0, 0, 0, 0.95),
    inset 0 -2px 5px rgba(255, 241, 184, 0.14);
  transition:
    transform 0.28s var(--ease-lux),
    box-shadow 0.4s var(--ease-lux),
    filter 0.3s var(--ease-lux);
}

/* Soft top-left reflection on the black lacquer */
.sg-wheel__hub-ring {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 62%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 250, 236, 0.52), rgba(255, 250, 236, 0.12) 55%, transparent 74%);
  pointer-events: none;
}

.sg-wheel__hub-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* balance the trailing letter-space */
  color: var(--champagne);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Idle breathing so the hub reads as lit */
.sg-wheel__hub {
  animation: sgHubBreathe 4.2s ease-in-out infinite;
}
@keyframes sgHubBreathe {
  0%, 100% { box-shadow:
      0 0 0 1px rgba(46, 36, 12, 0.95),
      0 0 0 2px rgba(214, 194, 132, 0.92),
      0 0 0 3px rgba(70, 55, 18, 0.9),
      0 0 0 5px rgba(6, 6, 6, 0.95),
      0 0 22px -10px rgba(255, 217, 120, 0.35),
      0 6px 16px -6px rgba(0, 0, 0, 1),
      inset 0 3px 8px rgba(0, 0, 0, 0.95),
      inset 0 -2px 5px rgba(255, 241, 184, 0.14); }
  50% { box-shadow:
      0 0 0 1px rgba(46, 36, 12, 0.95),
      0 0 0 2px rgba(244, 231, 184, 1),
      0 0 0 3px rgba(70, 55, 18, 0.9),
      0 0 0 5px rgba(6, 6, 6, 0.95),
      0 0 34px -6px rgba(255, 217, 120, 0.6),
      0 6px 16px -6px rgba(0, 0, 0, 1),
      inset 0 3px 8px rgba(0, 0, 0, 0.95),
      inset 0 -2px 5px rgba(255, 241, 184, 0.2); }
}

@media (hover: hover) {
  .sg-wheel__hub:hover {
    filter: brightness(1.12);
    transform: translate(-50%, -50%) scale(1.05);
  }
}
.sg-wheel__hub:active,
.sg-wheel__hub.is-pressed {
  transform: translate(-50%, -50%) scale(0.94);
  filter: brightness(0.94);
}
/* While spinning the hub is inert and recedes */
.sg-wheel-stage.is-spinning .sg-wheel__hub {
  animation: none;
  transform: translate(-50%, -50%) scale(0.9);
  cursor: default;
  filter: brightness(0.8);
}

/* ---- Marquee LED bulbs ---- */
.sg-marquee {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--wheel-size) + var(--wheel-rim) * 2);
  height: calc(var(--wheel-size) + var(--wheel-rim) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
}

.sg-bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0; height: 0;
  /* Seat the bulb ON the rim: wheel radius + half the rim band. */
  transform: rotate(var(--a)) translateY(calc((var(--wheel-size) / 2 + var(--wheel-rim) / 2) * -1));
}

/* The LED: a dark gold socket with a small glass dome and a warm centre. */
.sg-bulb__led {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(4.5px, 1.3vw, 6px);
  height: clamp(4.5px, 1.3vw, 6px);
  margin: calc(clamp(4.5px, 1.3vw, 6px) / -2) 0 0 calc(clamp(4.5px, 1.3vw, 6px) / -2);
  border-radius: 50%;
  /* dark gold socket, glass dome, warm-white centre */
  background: radial-gradient(circle at 50% 50%,
    #FFFFFF 0%, #FFF9E4 14%, #FFE9A8 34%, #D8B863 56%, #8A6E28 78%, #33280A 100%);
  box-shadow:
    0 0 0 1px rgba(20, 14, 4, 0.95),
    0 0 7px rgba(255, 226, 150, 0.55),
    0 0 14px rgba(201, 162, 39, 0.28);
  opacity: 0.45;
  animation: sgBulbIdle 4.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition: opacity 0.3s linear;
}

/* Small specular glint on the dome */
.sg-bulb__led::after {
  content: '';
  position: absolute;
  top: 13%;
  left: 22%;
  width: 38%;
  height: 32%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  filter: blur(0.3px);
  opacity: 0.7;
}

/* Idle: a slow, elegant breathing wave travelling clockwise round the rim.
   --d is staggered so the wave rolls rather than pulsing in unison. */
@keyframes sgBulbIdle {
  0%, 100% {
    opacity: 0.26;
    box-shadow:
      0 0 0 1px rgba(10, 8, 3, 0.9),
      0 1px 1px rgba(0, 0, 0, 0.8),
      0 0 6px rgba(201, 162, 39, 0.3),
      0 0 12px rgba(201, 162, 39, 0.12);
  }
  50% {
    opacity: 0.92;
    box-shadow:
      0 0 0 1px rgba(10, 8, 3, 0.9),
      0 1px 1px rgba(0, 0, 0, 0.8),
      0 0 11px rgba(255, 243, 196, 0.85),
      0 0 24px rgba(255, 217, 120, 0.42);
  }
}

/* Spin: fast clockwise chase, in step with the wheel's rotation */
.sg-marquee.is-lit .sg-bulb__led {
  animation-name: sgBulbChase;
  animation-duration: 0.62s;
  opacity: 0.85;
}
@keyframes sgBulbChase {
  0%, 100% {
    opacity: 0.5;
    box-shadow:
      0 0 0 1px rgba(10, 8, 3, 0.9),
      0 1px 1px rgba(0, 0, 0, 0.8),
      0 0 8px rgba(201, 162, 39, 0.5),
      0 0 16px rgba(201, 162, 39, 0.2);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 0 1px rgba(10, 8, 3, 0.9),
      0 1px 1px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(255, 246, 214, 1),
      0 0 32px rgba(255, 217, 120, 0.6);
  }
}

/* Winner: the bulbs nearest the pointer surge, then the whole ring breathes
   once before settling back to idle. */
.sg-marquee::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%,
    rgba(255, 241, 184, 0.42) 0%,
    rgba(255, 217, 120, 0.16) 14%,
    rgba(201, 162, 39, 0) 36%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-lux);
}
.sg-marquee.is-winner::after {
  opacity: 1;
  animation: sgBulbSurge 1500ms var(--ease-lux) forwards;
}
@keyframes sgBulbSurge {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 0.45; }
  100% { opacity: 0.22; }
}
.sg-marquee.is-winner .sg-bulb__led {
  animation-name: sgBulbChase;
  animation-duration: 0.5s;
}

/* ---- Crystal pointer: a compact precision indicator ---- */
.sg-pointer {
  position: absolute;
  top: calc(var(--wheel-rim) * 0.34);
  left: 50%;
  transform: translateX(-50%) rotate(var(--tick, 0deg));
  transform-origin: 50% calc(var(--wheel-rim) * 0.5);
  width: 0; height: 0;
  z-index: 9;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 23px solid transparent;
  pointer-events: none;
  will-change: transform;
}
/* Champagne-gold metallic housing */
.sg-pointer::before {
  content: '';
  position: absolute;
  top: 0; left: -11px;
  width: 0; height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 23px solid transparent;
  border-top-color: #DCC98F;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 9px rgba(255, 217, 120, 0.5));
}
/* Crystal inner face */
.sg-pointer__gem {
  position: absolute;
  top: 5px; left: -5px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 11px solid transparent;
  border-top-color: #FFFCF2;
  filter: drop-shadow(0 0 5px rgba(255, 252, 240, 0.8));
}

.sg-wheel__shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--wheel-rim) * 0.1);
  width: 68%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85), transparent 72%);
  filter: blur(9px);
  pointer-events: none;
  z-index: 1;
}

/* ---- Post-stop sparkle burst at the pointer ---- */
.sg-sparkle {
  position: absolute;
  top: calc(var(--wheel-rim) * 0.9);
  left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 10;
}
.sg-sparkle.is-bursting {
  animation: sgSparkleFlash 900ms var(--ease-lux);
}
@keyframes sgSparkleFlash {
  0%   { opacity: 0; transform: scale(0.2); }
  18%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(2.1); }
}
.sg-sparkle.is-bursting::before,
.sg-sparkle.is-bursting::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 184, 0.95), transparent);
}
.sg-sparkle.is-bursting::before {
  width: 150px; height: 2px;
  margin: -1px 0 0 -75px;
}
.sg-sparkle.is-bursting::after {
  width: 2px; height: 150px;
  margin: -75px 0 0 -1px;
  background: linear-gradient(180deg, transparent, rgba(255, 241, 184, 0.95), transparent);
}

.sg-spin-note {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-spark);
  opacity: 0.72;
  margin: 14px 0 16px;
}

.sg-userline {
  margin-top: 16px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ------------------------------------------------------------------
   12. RESULT MODAL
   ------------------------------------------------------------------ */
.sg-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.sg-modal[hidden] { display: none; }

.sg-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(4, 4, 4, 0.9);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: sgFadeIn 320ms var(--ease-lux) both;
}

.sg-modal__panel {
  position: relative;
  /* Explicit stacking: the panel must never sit under the backdrop. */
  z-index: 1;
  width: 100%;
  max-width: 400px;
  max-height: 90svh;
  /* The aura/flare are deliberately wider than the panel. Clip them on the
     x-axis so they can never create a horizontal scrollbar, while the
     y-axis keeps scrolling on short viewports. */
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 24px 26px;
  text-align: center;
  /* Dark glass */
  background-color: #0A0A0A;
  background-image:
    linear-gradient(180deg, rgba(255, 241, 184, 0.06) 0%, rgba(255, 255, 255, 0.01) 22%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #141210 0%, #0A0A0A 60%, #060505 100%);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.20),
    0 0 70px -18px rgba(255, 217, 120, 0.55),
    0 44px 100px -40px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 247, 220, 0.14);
  animation: sgModalIn 560ms var(--ease-lux) both;
}

/* Gold aura washing down the top of the card */
.sg-modal__aura {
  position: absolute;
  top: -46%;
  left: 50%;
  width: 150%;
  height: 96%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 217, 120, 0.22), rgba(201, 162, 39, 0.08) 42%, transparent 66%);
  animation: sgFlare 5.5s ease-in-out infinite alternate;
}

/* Four-point sparkle above the eyebrow */
.sg-modal__star {
  position: relative;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1;
  color: var(--gold-spark);
  text-shadow: 0 0 18px rgba(255, 217, 120, 0.9), 0 0 40px rgba(201, 162, 39, 0.55);
  animation: sgStarPulse 2.4s ease-in-out infinite;
}
@keyframes sgStarPulse {
  0%, 100% { opacity: 0.7; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.sg-modal__panel::before {
  /* Opaque base layer - keeps the reward panel readable over the page. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #0A0A0A;
}

@keyframes sgModalIn {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.sg-modal__flare {
  position: absolute;
  top: -40%; left: 50%;
  width: 130%; height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(201,162,39,0.26), transparent 62%);
  pointer-events: none;
  animation: sgFlare 5.5s ease-in-out infinite alternate;
}
@keyframes sgFlare {
  from { opacity: 0.55; transform: translateX(-50%) scale(0.9); }
  to   { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}

.sg-modal__eyebrow {
  position: relative;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-spark);
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
}
.sg-modal__eyebrow.is-muted { color: var(--text-3); text-shadow: none; }

.sg-modal__label {
  position: relative;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-2);
  opacity: 0.7;
  margin-bottom: 10px;
}
.sg-modal__label[hidden] { display: none; }

.sg-modal__reward {
  position: relative;
  font-size: clamp(34px, 11vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 12px;
  /* Polished gold with a champagne crest */
  background: linear-gradient(176deg, #FFFFFF 4%, #FFF1B8 30%, #FFD978 52%, #C9A227 78%, #FFF1B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(201, 162, 39, 0.45));
}

.sg-modal__desc {
  position: relative;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30ch;
  margin: 0 auto 22px;
}

.sg-coupon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  margin-bottom: 22px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 241, 184, 0.10), transparent 62%),
    rgba(201, 162, 39, 0.05);
  box-shadow:
    inset 0 0 26px rgba(201, 162, 39, 0.10),
    0 0 30px -14px rgba(255, 217, 120, 0.5);
}
.sg-coupon__label {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-spark);
  opacity: 0.85;
}
.sg-coupon__code {
  font-family: var(--font-display);
  font-size: clamp(22px, 7.6vw, 28px);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #fff;
  word-break: break-all;
}
.sg-coupon__meta {
  font-size: 11.5px;
  letter-spacing: 0.10em;
  color: var(--gold-bright);
}

.sg-modal__actions { position: relative; display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------------
   13. TOAST + CONFETTI + SHIMMER
   ------------------------------------------------------------------ */
.sg-toast {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  z-index: 300;
  max-width: min(88vw, 380px);
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #17170F, #0C0C0C);
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: var(--champagne);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  box-shadow:
    0 0 30px -12px rgba(255, 217, 120, 0.6),
    0 18px 44px -20px rgba(0,0,0,1);
  opacity: 0;
  transition: opacity 0.28s var(--ease-lux), transform 0.28s var(--ease-lux);
}
.sg-toast[hidden] { display: none; }
.sg-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Luxury particle burst - fine gold motes, never paper confetti */
.sg-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 250;
  overflow: hidden;
}
.sg-confetti__bit {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-spark);
  box-shadow: 0 0 8px rgba(255, 217, 120, 0.9);
  opacity: 0;
  animation: sgConfetti 2.4s var(--ease-lux) forwards;
}
@keyframes sgConfetti {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(0.2) rotate(var(--rot)); }
}

/* One-shot diagonal shine that sweeps the page when a reward lands */
.sg-shimmer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 260;
  overflow: hidden;
  opacity: 0;
}
.sg-shimmer.is-sweeping {
  animation: sgShimmerSweep 1200ms var(--ease-lux);
}
.sg-shimmer.is-sweeping::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -60%;
  width: 45%;
  height: 180%;
  transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(255, 247, 220, 0.10), rgba(255, 241, 184, 0.16), transparent);
  filter: blur(2px);
}
@keyframes sgShimmerSweep {
  0%   { opacity: 0; transform: translateX(0); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(340%); }
}

/* ------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------ */
.sg-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 30px auto 0;
  padding: 0 20px calc(30px + env(safe-area-inset-bottom));
  text-align: center;
}
.sg-footer__rule {
  height: 1px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.45), transparent);
}
.sg-footer__note { font-size: 11px; color: var(--text-3); letter-spacing: 0.06em; }
/* Copyright line: refined champagne typography rather than a neon label.
   Manrope via the project font variable; sized and spaced to stay legible on
   the near-black background without competing with the main content. */
.sg-footer__meta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D8C58A;
  text-shadow: 0 0 10px rgba(230, 199, 102, 0.08);
  margin-top: 10px;
}

/* ------------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------------ */
/* Narrow phones: ease the tracking so the copyright stays on one line
   instead of wrapping or clipping. */
@media (max-width: 380px) {
  .sg-footer__meta { letter-spacing: 0.05em; }
}

@media (min-width: 480px) {
  body { font-size: 16px; }
  .sg-shell { padding-left: 24px; padding-right: 24px; }
  .sg-card { padding: 26px 24px 28px; }
  :root { --wheel-size: min(70vw, 340px); }
}

@media (min-width: 768px) {
  :root { --shell: 520px; --wheel-size: 380px; }
  .sg-display { font-size: 64px; }
  .sg-title { font-size: 40px; }
  .sg-title--hero { font-size: 52px; }
  .sg-footer__meta { font-size: 13px; letter-spacing: 0.11em; }
  .sg-brand__word { font-size: 26px; }
  .sg-otp { gap: 10px; }
  .sg-otp__cell { font-size: 27px; }
  .sg-seg__label { font-size: 12px; }
}

@media (min-width: 1024px) {
  /* Give the wheel room to be the hero on desktop. The shell widens with it
     so the rim and CTA stay inside the viewport - no overflow. */
  :root { --shell: 620px; --wheel-size: 470px; }
}

@media (min-width: 1280px) {
  /* Hero scale, but the CTA still has to sit above a 900px-tall fold. */
  :root { --shell: 660px; --wheel-size: 470px; }
}

/* On tall desktop viewports tighten the vertical rhythm so the wheel and the
   CTA both fit without scrolling. */
@media (min-width: 1024px) and (min-height: 820px) {
  .sg-brand { margin-bottom: 22px; }
  .sg-spinhead { margin-bottom: 8px; }
  .sg-title--hero { font-size: 46px; }
  .sg-wheel-stage { margin: 0 auto 0; }
  .sg-spin-note { margin: 12px 0 12px; }
}

/* Small phones: keep the wheel impressive but leave room for the CTA */
@media (max-width: 374px) {
  :root { --wheel-size: min(86vw, 268px); --wheel-rim: 10px; }
  .sg-shell { padding-left: 16px; padding-right: 16px; }
}

/* Short viewports (landscape phones) */
@media (max-height: 700px) and (max-width: 540px) {
  .sg-brand { margin-bottom: 20px; }
  :root { --wheel-size: min(58vw, 240px); --wheel-rim: 9px; }
  .sg-spin-note { margin: 12px 0 10px; }
}

/* ------------------------------------------------------------------
   16. ACCESSIBILITY
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep a short, legible rotation so the result is still perceivable */
  .sg-wheel__inner { transition-duration: 1s !important; }
  .sg-glow, .sg-brand__icon, .sg-modal__flare, .sg-modal__aura,
  .sg-modal__star, .sg-rays, .sg-motes, .sg-sparkle, .sg-shimmer,
  .sg-wheel__hub, .sg-bulb__led, .sg-rim__sheen, .sg-pointer,
  .sg-marquee::after, .sg-halo {
    animation: none !important;
  }
  .sg-confetti { display: none; }
  /* Static glow instead of an animated one */
  .sg-seg.is-winner::before { opacity: 0.55; }
  .sg-marquee.is-winner::after { opacity: 0.35; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.is-modal-open { overflow: hidden; }