@zencemarketing/spin-scratch-sdk 0.1.0-alpha.1

package/dist/react.cjs.js

@@ -0,0 +1,3588 @@
+/**
+ * SpinWheel SDK v0.1.0-alpha.1
+ * (c) 2026 – MIT License
+ * A dynamic, configurable Spin & Win wheel and Scratch Card SDK for Vanilla JS & React.
+ */
+'use strict';
+
+var React = require('react');
+
+/**
+ * Generates the full SDK stylesheet as a string, interpolated with theme colors.
+ * @param {object} config - Style configuration object
+ * @param {object} config.theme - Theme colors
+ * @param {string} [config.titleColor] - Custom title color
+ * @param {string} [config.subtitleColor] - Custom subtitle color
+ * @param {string} [config.backgroundColor] - Custom background color
+ * @param {string} [config.backgroundImage] - Custom background image URL
+ * @param {string} [config.ringColor] - Custom ring color
+ * @param {boolean} [config.ringShadow] - Enable ring shadow
+ * @param {boolean} [config.ringAnimation] - Enable ring animation
+ * @param {string} [config.pointerColor] - Custom pointer color
+ * @param {string} [config.buttonColor] - Custom button color
+ * @param {boolean} [config.buttonShadow] - Enable button shadow
+ * @param {boolean} [config.buttonAnimation] - Enable button animation
+ * @param {string} [config.winCardRedeemButtonColorTop] - Redeem button gradient top
+ * @param {string} [config.winCardRedeemButtonColorBottom] - Redeem button gradient bottom
+ * @param {string} [config.winCardRedeemButtonTextColor] - Redeem button text color
+ * @param {function} hexToRGBA
+ * @returns {string}
+ */
+function buildCSS(config, hexToRGBA) {
+  const t = config.theme || {};
+
+  // Extract theme colors with fallbacks
+  const gold = t.gold || '#e8c547';
+  const goldLight = t.goldLight || '#f5d76e';
+  const goldDark = t.goldDark || '#c9a227';
+  t.bgDark || '#0d0d12';
+  const textMuted = t.textMuted || '#9ca3af';
+
+  // Configurable colors
+  const titleColor = config.titleColor || goldLight;
+  const subtitleColor = config.subtitleColor || textMuted;
+  const ringColor = config.ringColor || gold;
+  const pointerColor = config.pointerColor || gold;
+  const buttonBaseColor = config.buttonColor || gold;
+  const redeemBtnTop = config.winCardRedeemButtonColorTop || '#15803d';
+  const redeemBtnBottom = config.winCardRedeemButtonColorBottom || '#166534';
+  const redeemBtnText = config.winCardRedeemButtonTextColor || '#ffffff';
+
+  // Feature toggles
+  const ringShadow = config.ringShadow !== false;
+  const ringAnimation = config.ringAnimation !== false;
+  const buttonShadow = config.buttonShadow !== false;
+  const buttonAnimation = config.buttonAnimation !== false;
+
+  // Computed values
+  hexToRGBA(gold, 0.4);
+  const ringGlow = hexToRGBA(ringColor, 0.4);
+  const buttonGlow = hexToRGBA(buttonBaseColor, 0.4);
+
+  // Background styles
+  const bgStyle = config.backgroundColor ? `background-color:${config.backgroundColor};` : '';
+  const bgImageStyle = config.backgroundImage ? `background-image:url('${config.backgroundImage}');background-size:cover;background-position:center;` : '';
+
+  // Ring shadow and animation
+  const ringBoxShadow = ringShadow ? `box-shadow:0 0 0 2px rgba(0,0,0,.5), 0 0 50px ${ringGlow}, inset 0 2px 4px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.2);` : `box-shadow:0 0 0 2px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.2);`;
+  const ringAnimationCSS = ringAnimation ? `animation:sw-ring-pulse 3s ease-in-out infinite;` : '';
+
+  // Button shadow and animation
+  const buttonBoxShadow = buttonShadow ? `box-shadow:0 4px 0 ${goldDark}, 0 6px 20px ${buttonGlow}, inset 0 1px 0 rgba(255,255,255,.3);` : `box-shadow:0 4px 0 ${goldDark}, inset 0 1px 0 rgba(255,255,255,.3);`;
+  const buttonHoverStyle = buttonAnimation ? `.sw-spin-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 ${goldDark},0 8px 28px ${buttonGlow},inset 0 1px 0 rgba(255,255,255,.3)}` : `.sw-spin-btn:hover:not(:disabled){filter:brightness(1.05)}`;
+  const buttonActiveStyle = buttonAnimation ? `.sw-spin-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 ${goldDark},0 4px 15px ${buttonGlow},inset 0 1px 0 rgba(255,255,255,.2)}` : `.sw-spin-btn:active:not(:disabled){transform:translateY(1px)}`;
+  return `
+/* === SpinWheel SDK v2.1 === */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Outfit:wght@300;500;600;700&display=swap');
+
+.sw-root *, .sw-overlay * { margin:0; padding:0; box-sizing:border-box; }
+
+.sw-root {
+  font-family:'Outfit',sans-serif;
+  display:flex; flex-direction:column; align-items:center; width:100%;
+  ${bgStyle}
+  ${bgImageStyle}
+}
+
+/* ── header ── */
+.sw-header { text-align:center; margin-bottom:.5rem; }
+.sw-title {
+  font-family:'Playfair Display',serif;
+  font-size:clamp(2rem,6vw,3.5rem); font-weight:800; letter-spacing:.02em;
+}
+.sw-title .sw-spin-text {
+  color:${titleColor};
+  text-shadow:0 0 30px ${hexToRGBA(titleColor, 0.4)}, 0 0 60px ${hexToRGBA(titleColor, 0.2)};
+}
+.sw-title .sw-win-text { color:${goldDark}; }
+.sw-subtitle { margin-top:.5rem; color:${subtitleColor}; font-size:1rem; font-weight:300; }
+
+/* ── wheel ── */
+.sw-wheel-container {
+  position:relative; width:min(340px,90vw); aspect-ratio:1; margin:2rem; padding-top:28px;
+}
+.sw-wheel-outer {
+  position:absolute; inset:-10px; border-radius:50%;
+  background:linear-gradient(145deg,${goldLight} 0%,${ringColor} 25%,${goldDark} 50%,${ringColor} 75%,${goldDark} 100%);
+  padding:8px;
+  ${ringBoxShadow}
+  ${ringAnimationCSS}
+}
+${ringAnimation ? `
+@keyframes sw-ring-pulse {
+  0%,100%{box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 50px ${ringGlow},inset 0 2px 4px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.2)}
+  50%{box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 65px ${hexToRGBA(ringColor, 0.5)},inset 0 2px 6px rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.2)}
+}` : ''}
+.sw-wheel-inner {
+  width:100%; height:100%; border-radius:50%; overflow:hidden;
+  position:relative; background:transparent;
+  box-shadow:inset 0 0 0 3px rgba(0,0,0,.6);
+}
+.sw-wheel {
+  width:100%; height:100%; border-radius:50%; position:relative;
+  transition:transform .1s linear; will-change:transform;
+}
+.sw-wheel.sw-spinning { transition:none; }
+
+/* ── hub ── */
+.sw-wheel-hub {
+  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
+  width:20%; height:20%; min-width:52px; min-height:52px; border-radius:50%;
+  background:linear-gradient(145deg,${goldLight} 0%,${gold} 40%,${goldDark} 100%);
+  box-shadow:0 3px 12px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.2);
+  display:flex; flex-direction:column; align-items:center; justify-content:center;
+  z-index:10; cursor:pointer; transition:transform .15s ease, filter .15s ease;
+}
+.sw-wheel-hub:hover { transform:translate(-50%,-50%) scale(1.05); filter:brightness(1.1); }
+.sw-wheel-hub:active { transform:translate(-50%,-50%) scale(.98); }
+.sw-wheel-hub-icon { font-size:12px; color:#1a1a1f; line-height:1; margin-bottom:1px; }
+.sw-wheel-hub-brand { font-size:8px; font-weight:700; color:#1a1a1f; letter-spacing:.02em; text-transform:lowercase; }
+.sw-wheel-hub-brand::first-letter { text-transform:uppercase; }
+
+/* ── segments ── */
+.sw-segment {
+  position:absolute; width:50%; height:50%; left:50%; top:50%;
+  transform-origin:0% 0%; display:flex; align-items:center; justify-content:center; border:none;
+}
+.sw-segment-content {
+  position:absolute; width:70%; top:30%; text-align:center; color:#000; font-weight:600;
+  font-size:clamp(.6rem,2vw,.8rem); text-shadow:0 1px 3px rgb(220 220 220/50%);
+  display:flex; flex-direction:row; align-items:center; justify-content:center;
+  gap:4px; word-wrap:break-word; left:30%;
+}
+.sw-segment-icon { font-size:1em; line-height:1; flex-shrink:0; }
+.sw-segment-label { display:inline-block; }
+
+/* ── pointer ── */
+.sw-pointer {
+  position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:20; width:0; height:0;
+}
+.sw-pointer-outer {
+  position:absolute; left:50%; transform:translateX(-50%); width:0; height:0;
+  border-left:22px solid transparent; border-right:22px solid transparent;
+  border-top:36px solid ${pointerColor};
+  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)) drop-shadow(0 0 10px ${hexToRGBA(pointerColor, 0.4)}); top:-40px;
+}
+.sw-pointer.sw-highlight .sw-pointer-outer {
+  animation:sw-pointer-bounce .5s cubic-bezier(.34,1.56,.64,1);
+}
+@keyframes sw-pointer-bounce {
+  0%{transform:translateX(-50%) scale(1)}
+  40%{transform:translateX(-50%) scale(1.12)}
+  100%{transform:translateX(-50%) scale(1)}
+}
+
+/* ── spin button ── */
+.sw-spin-btn {
+  font-family:'Outfit',sans-serif; font-size:1.25rem; font-weight:700;
+  letter-spacing:.15em; padding:1rem 3rem; border:none; border-radius:12px;
+  background:linear-gradient(180deg,${goldLight},${goldDark}); color:#1a1a1f;
+  cursor:pointer;
+  ${buttonBoxShadow}
+  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
+}
+${buttonHoverStyle}
+${buttonActiveStyle}
+.sw-spin-btn:disabled{opacity:.6;cursor:not-allowed}
+
+/* ── overlay & win card ── */
+.sw-overlay {
+  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
+  display:flex; align-items:center; justify-content:center;
+  z-index:100; opacity:0; visibility:hidden;
+  transition:opacity .4s ease, visibility .4s ease;
+  font-family:'Outfit',sans-serif;
+}
+.sw-overlay.sw-visible { opacity:1; visibility:visible; }
+
+.sw-win-card {
+  position:relative; max-width:340px; width:90%; border-radius:12px; overflow:hidden;
+  box-shadow:0 25px 50px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.1);
+  transform:scale(.6); opacity:0; transition:none;
+}
+.sw-overlay.sw-visible .sw-win-card {
+  animation:sw-card-flare .6s cubic-bezier(.34,1.56,.64,1) forwards;
+}
+@keyframes sw-card-flare {
+  0%{transform:scale(.6);opacity:0;filter:blur(8px)}
+  50%{transform:scale(1.08);opacity:1;filter:blur(0)}
+  70%{transform:scale(.98)}
+  100%{transform:scale(1);opacity:1;filter:blur(0)}
+}
+
+.sw-win-card-top {
+  background:linear-gradient(160deg,#fff,#fff); padding:1.75rem 1.25rem;
+  text-align:center; position:relative;
+}
+.sw-win-card-product {
+  width:100px; height:100px; margin:0 auto .75rem; border-radius:12px;
+  display:flex; align-items:center; justify-content:center; font-size:3rem;
+  box-shadow:0 8px 24px rgba(0,0,0,.3); background:linear-gradient(145deg,#252530,#1c1c24);
+}
+.sw-win-card-brand { font-size:1rem; font-weight:600; color:#000; letter-spacing:.05em; }
+
+.sw-win-card-perf { height:14px; background:#fff; position:relative; }
+.sw-win-card-perf::after {
+  content:''; position:absolute; left:0; right:0; top:-7px; height:14px;
+  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath fill='%231a1a22' d='M0 14V7h2v7H0zm2 0V4h2v10H2zm2 0V7h2v7H4zm2 0V4h2v10H6zm2 0V7h2v7H8zm2 0V0h2v14h-2z'/%3E%3C/svg%3E") repeat-x;
+  background-size:12px 14px;
+}
+
+.sw-win-card-mid {
+  background:#fff; padding:1.25rem 1.25rem 1.25rem 1rem; position:relative;
+}
+.sw-win-card-title {
+  font-size:1rem; font-weight:700; color:#1a1a1f;
+  text-transform:lowercase; margin-bottom:.25rem; line-height:1.3;
+}
+.sw-win-card-title::first-letter { text-transform:uppercase; }
+.sw-win-card-worth { font-size:.8rem; color:#6b7280; margin-bottom:.75rem; font-weight:500; }
+.sw-win-card-code-wrap { display:flex; align-items:center; gap:.5rem; }
+.sw-win-card-code {
+  flex:1; font-size:.85rem; font-weight:600; letter-spacing:.08em;
+  color:#374151; background:#f3f4f6; border:none; border-radius:8px;
+  padding:.5rem .75rem; font-family:'Outfit',monospace;
+}
+.sw-win-card-copy {
+  width:40px; height:40px; border-radius:8px; border:none;
+  background:#e5e7eb; color:#4b5563; cursor:pointer;
+  display:flex; align-items:center; justify-content:center;
+  transition:background .2s, color .2s;
+}
+.sw-win-card-copy:hover { background:#d1d5db; color:#1f2937; }
+.sw-win-card-copy svg { width:18px; height:18px; }
+
+.sw-win-card-bot {
+  background:linear-gradient(180deg,${redeemBtnTop},${redeemBtnBottom});
+  padding:1rem 1.25rem; display:flex; align-items:center;
+  justify-content:center; gap:.5rem; cursor:pointer;
+  transition:filter .2s; position:relative;
+}
+.sw-win-card-bot:hover { filter:brightness(1.08); }
+.sw-win-card-redeem { font-size:1rem; font-weight:700; color:${redeemBtnText}; letter-spacing:.02em; }
+.sw-win-card-arrow { width:20px; height:20px; color:${redeemBtnText}; }
+
+/* ── confetti ── */
+.sw-confetti {
+  position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden;
+}
+.sw-confetti span {
+  position:absolute; width:10px; height:10px; border-radius:2px;
+  animation:sw-confetti-fall 1.2s ease-out forwards; opacity:0;
+}
+.sw-overlay.sw-visible .sw-confetti span { opacity:1; }
+@keyframes sw-confetti-fall {
+  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
+  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
+}
+
+/* ── prefers-reduced-motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .sw-wheel { transition:none !important; }
+  .sw-wheel-outer { animation:none !important; }
+  .sw-spin-btn { transition:none !important; }
+  .sw-spin-btn:hover:not(:disabled) { transform:none !important; }
+  .sw-spin-btn:active:not(:disabled) { transform:none !important; }
+  .sw-overlay.sw-visible .sw-win-card { animation:none !important; opacity:1; transform:scale(1); }
+  .sw-confetti span { animation:none !important; display:none; }
+  .sw-pointer.sw-highlight .sw-pointer-outer { animation:none !important; }
+}
+`;
+}
+
+/**
+ * SpinWheel SDK – Utility helpers
+ * Pure functions with no side effects.
+ */
+
+/**
+ * Convert a hex colour (#rrggbb) to an rgba() string.
+ * @param {string} hex
+ * @param {number} alpha
+ * @returns {string}
+ */
+function hexToRGBA(hex, alpha) {
+  if (!hex || typeof hex !== 'string') return `rgba(0,0,0,${alpha})`;
+  const cleanHex = hex.replace('#', '');
+  const r = parseInt(cleanHex.slice(0, 2), 16) || 0;
+  const g = parseInt(cleanHex.slice(2, 4), 16) || 0;
+  const b = parseInt(cleanHex.slice(4, 6), 16) || 0;
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+/**
+ * Check if a value is a plain object (not array, null, etc.)
+ * @param {any} item
+ * @returns {boolean}
+ */
+function isPlainObject(item) {
+  return item !== null && typeof item === 'object' && !Array.isArray(item) && item.constructor === Object;
+}
+
+/**
+ * Deep merge multiple objects together.
+ * Later objects override earlier ones. Arrays are replaced, not merged.
+ * @param {object} target - The target object to merge into
+ * @param {...object} sources - Source objects to merge from
+ * @returns {object} The merged object
+ */
+function deepMerge(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+  if (isPlainObject(target) && isPlainObject(source)) {
+    for (const key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        if (isPlainObject(source[key])) {
+          if (!target[key]) {
+            target[key] = {};
+          }
+          deepMerge(target[key], source[key]);
+        } else if (source[key] !== undefined) {
+          target[key] = source[key];
+        }
+      }
+    }
+  }
+  return deepMerge(target, ...sources);
+}
+
+/**
+ * Generate a random alphanumeric coupon code.
+ * @param {number} [len=9]
+ * @returns {string}
+ */
+function randomCode(len = 9) {
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+  let code = '';
+  for (let i = 0; i < len; i++) {
+    code += chars[Math.floor(Math.random() * chars.length)];
+  }
+  return code;
+}
+
+/**
+ * Build a CSS `clip-path: polygon(…)` for a pie-slice with a curved outer edge.
+ * @param {number} angleDeg – angular width of one segment in degrees
+ * @returns {string}
+ */
+function buildClipPath(angleDeg) {
+  const points = ['0 0'];
+  const steps = Math.max(12, Math.round(angleDeg / 3));
+  const rad = angleDeg * Math.PI / 180;
+  for (let i = 0; i <= steps; i++) {
+    const a = i / steps * rad;
+    const x = (Math.cos(a) * 100).toFixed(2);
+    const y = (Math.sin(a) * 100).toFixed(2);
+    points.push(`${x}% ${y}%`);
+  }
+  return `polygon(${points.join(', ')})`;
+}
+
+/**
+ * Text rotation angle so label reads along the bisector of a segment.
+ * @param {number} angleDeg
+ * @returns {number}
+ */
+function textRotation(angleDeg) {
+  return 90 + angleDeg / 2;
+}
+
+/**
+ * Escape HTML special characters.
+ * @param {string} str
+ * @returns {string}
+ */
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/** SVG markup for the copy icon */
+const COPY_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+
+/** SVG markup for the check (copied) icon */
+const CHECK_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
+
+/** SVG markup for the arrow icon */
+const ARROW_ICON_SVG = '<svg class="sw-win-card-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
+
+/** Default confetti palette */
+const CONFETTI_COLORS = ['#e8c547', '#dc2626', '#16a34a', '#2563eb', '#7c3aed', '#ea580c'];
+
+/**
+ * SpinWheel SDK v0.1.0
+ *
+ * A fully dynamic, configurable Spin & Win wheel.
+ * ES6 class-based. Outputs: UMD · ESM · CJS via Rollup.
+ *
+ * @example
+ *   import { SpinWheel } from 'spin-wheel-sdk';
+ *
+ *   const wheel = SpinWheel.init({
+ *     container: '#app',
+ *     segments: [
+ *       { label: 'Prize 1', color: '#55efc4', icon: '🎁' },
+ *       { label: 'Prize 2', color: '#81ecec', icon: '✨' },
+ *     ],
+ *     onSpinEnd(prize, idx) { console.log(prize); },
+ *   });
+ */
+
+/* ------------------------------------------------------------------ */
+/*  Default configuration                                              */
+/* ------------------------------------------------------------------ */
+
+/** @type {SpinWheelOptions} */
+const DEFAULTS$1 = Object.freeze({
+  // ── Core ──
+  container: null,
+  segments: [],
+  winningIndex: null,
+  // ── Spin Behavior ──
+  spinDuration: 5000,
+  minSpins: 5,
+  maxSpins: 8,
+  spinLimit: null,
+  // null = unlimited, number = max spins allowed
+
+  // ── Header UI ──
+  headerTitle: null,
+  headerSubtitle: null,
+  titleColor: null,
+  // uses theme.goldLight if null
+  subtitleColor: null,
+  // uses theme.textMuted if null
+
+  // ── Hub (center button) ──
+  hubLabel: 'Spin & win',
+  hubIcon: '▲',
+  // ── Spin Button ──
+  showButton: true,
+  buttonText: 'SPIN!',
+  // ── Wheel Appearance ──
+  backgroundColor: null,
+  // page/container background
+  backgroundImage: null,
+  // optional background image URL
+  ringColor: null,
+  // uses theme gradient if null
+  ringShadow: true,
+  ringAnimation: true,
+  // pulsing ring glow animation
+  pointerColor: null,
+  // uses theme.gold if null
+  buttonColor: null,
+  // uses theme gradient if null
+  buttonShadow: true,
+  buttonAnimation: true,
+  // hover/active animations
+
+  // ── Win Card ──
+  showWinCard: true,
+  generateCode: true,
+  codeLength: 9,
+  redeemUrl: null,
+  winCardBrandLabel: null,
+  // uses hubLabel if null
+  winCardWorthLabel: 'WORTH',
+  winCardRedeemButtonText: 'Redeem Now',
+  winCardRedeemButtonColorTop: '#15803d',
+  winCardRedeemButtonColorBottom: '#166534',
+  winCardRedeemButtonTextColor: '#ffffff',
+  // ── Confetti ──
+  confettiOnWin: true,
+  confettiColors: null,
+  // uses default CONFETTI_COLORS if null
+  confettiCount: 40,
+  // ── Theme Colors ──
+  theme: Object.freeze({
+    gold: '#e8c547',
+    goldLight: '#f5d76e',
+    goldDark: '#c9a227',
+    bgDark: '#0d0d12',
+    textMuted: '#9ca3af'
+  }),
+  // ── Callbacks ──
+  onSpinStart: null,
+  onSpinEnd: null,
+  onRedeem: null,
+  onSpinLimitReached: null
+});
+
+/* ------------------------------------------------------------------ */
+/*  Validation                                                         */
+/* ------------------------------------------------------------------ */
+
+function _validateOptions$1(opts) {
+  // Container — truly required, cannot default
+  if (!opts.container) {
+    throw new Error('[SpinWheel] "container" is required.');
+  }
+
+  // Segments — truly required, cannot default
+  if (!Array.isArray(opts.segments) || opts.segments.length < 2) {
+    throw new Error('[SpinWheel] "segments" must be an array with at least 2 items.');
+  }
+  for (let i = 0; i < opts.segments.length; i++) {
+    const s = opts.segments[i];
+    if (!s || typeof s !== 'object') {
+      throw new Error(`[SpinWheel] segments[${i}] must be an object.`);
+    }
+    if (!s.label || typeof s.label !== 'string') {
+      throw new Error(`[SpinWheel] segments[${i}].label is required and must be a string.`);
+    }
+    if (!s.color || typeof s.color !== 'string') {
+      throw new Error(`[SpinWheel] segments[${i}].color is required and must be a string.`);
+    }
+  }
+
+  // ── Clamp / auto-fix numeric & enum values instead of crashing ──
+
+  // spinDuration: clamp to min 500
+  if (opts.spinDuration !== undefined) {
+    if (typeof opts.spinDuration !== 'number' || isNaN(opts.spinDuration)) {
+      console.warn('[SpinWheel] "spinDuration" must be a number. Using default (5000).');
+      opts.spinDuration = DEFAULTS$1.spinDuration;
+    } else if (opts.spinDuration <= 0) {
+      console.warn(`[SpinWheel] "spinDuration" (${opts.spinDuration}) must be positive. Clamping to 500.`);
+      opts.spinDuration = 500;
+    }
+  }
+
+  // codeLength: clamp to min 1
+  if (opts.codeLength !== undefined) {
+    if (typeof opts.codeLength !== 'number' || isNaN(opts.codeLength)) {
+      console.warn('[SpinWheel] "codeLength" must be a number. Using default (9).');
+      opts.codeLength = DEFAULTS$1.codeLength;
+    } else if (opts.codeLength < 1) {
+      console.warn(`[SpinWheel] "codeLength" (${opts.codeLength}) is below 1. Clamping to 1.`);
+      opts.codeLength = 1;
+    } else {
+      opts.codeLength = Math.floor(opts.codeLength);
+    }
+  }
+
+  // confettiCount: clamp to min 0
+  if (opts.confettiCount !== undefined) {
+    if (typeof opts.confettiCount !== 'number' || isNaN(opts.confettiCount)) {
+      console.warn('[SpinWheel] "confettiCount" must be a number. Using default (40).');
+      opts.confettiCount = DEFAULTS$1.confettiCount;
+    } else if (opts.confettiCount < 0) {
+      console.warn(`[SpinWheel] "confettiCount" (${opts.confettiCount}) is negative. Clamping to 0.`);
+      opts.confettiCount = 0;
+    }
+  }
+
+  // minSpins & maxSpins: ensure min <= max, swap if needed
+  if (opts.minSpins !== undefined) {
+    if (typeof opts.minSpins !== 'number' || isNaN(opts.minSpins)) {
+      console.warn('[SpinWheel] "minSpins" must be a number. Using default (5).');
+      opts.minSpins = DEFAULTS$1.minSpins;
+    } else if (opts.minSpins < 1) {
+      console.warn(`[SpinWheel] "minSpins" (${opts.minSpins}) is below 1. Clamping to 1.`);
+      opts.minSpins = 1;
+    }
+  }
+  if (opts.maxSpins !== undefined) {
+    if (typeof opts.maxSpins !== 'number' || isNaN(opts.maxSpins)) {
+      console.warn('[SpinWheel] "maxSpins" must be a number. Using default (8).');
+      opts.maxSpins = DEFAULTS$1.maxSpins;
+    } else if (opts.maxSpins < 1) {
+      console.warn(`[SpinWheel] "maxSpins" (${opts.maxSpins}) is below 1. Clamping to 1.`);
+      opts.maxSpins = 1;
+    }
+  }
+  const min = opts.minSpins ?? DEFAULTS$1.minSpins;
+  const max = opts.maxSpins ?? DEFAULTS$1.maxSpins;
+  if (typeof min === 'number' && typeof max === 'number' && min > max) {
+    console.warn(`[SpinWheel] "minSpins" (${min}) is greater than "maxSpins" (${max}). Swapping values.`);
+    opts.minSpins = max;
+    opts.maxSpins = min;
+  }
+
+  // spinLimit: clamp to min 1 if not null
+  if (opts.spinLimit !== undefined && opts.spinLimit !== null) {
+    if (typeof opts.spinLimit !== 'number' || isNaN(opts.spinLimit)) {
+      console.warn('[SpinWheel] "spinLimit" must be a positive number or null. Setting to null (unlimited).');
+      opts.spinLimit = null;
+    } else if (opts.spinLimit < 1) {
+      console.warn(`[SpinWheel] "spinLimit" (${opts.spinLimit}) is below 1. Clamping to 1.`);
+      opts.spinLimit = 1;
+    }
+  }
+
+  // winningIndex: clamp to valid segment range
+  if (opts.winningIndex !== undefined && opts.winningIndex !== null) {
+    if (typeof opts.winningIndex !== 'number' || isNaN(opts.winningIndex)) {
+      console.warn('[SpinWheel] "winningIndex" must be a number or null. Setting to null (random).');
+      opts.winningIndex = null;
+    } else if (opts.winningIndex < 0) {
+      console.warn(`[SpinWheel] "winningIndex" (${opts.winningIndex}) is negative. Clamping to 0.`);
+      opts.winningIndex = 0;
+    } else if (opts.winningIndex >= opts.segments.length) {
+      const maxIdx = opts.segments.length - 1;
+      console.warn(`[SpinWheel] "winningIndex" (${opts.winningIndex}) exceeds max (${maxIdx}). Clamping to ${maxIdx}.`);
+      opts.winningIndex = maxIdx;
+    }
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  SSR guard                                                          */
+/* ------------------------------------------------------------------ */
+
+const _isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+/** @returns {boolean} Whether the user prefers reduced motion */
+function _prefersReducedMotion$1() {
+  return _isBrowser$1 && window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+}
+
+/* ------------------------------------------------------------------ */
+/*  CSS injection (once per page)                                      */
+/* ------------------------------------------------------------------ */
+
+let _injectedThemeKey$1 = null;
+function injectCSS$1(options) {
+  if (!_isBrowser$1) return;
+  const theme = {
+    ...DEFAULTS$1.theme,
+    ...(options.theme || {})
+  };
+
+  // Build a key from all style-affecting options
+  const styleConfig = {
+    theme,
+    titleColor: options.titleColor,
+    subtitleColor: options.subtitleColor,
+    backgroundColor: options.backgroundColor,
+    backgroundImage: options.backgroundImage,
+    ringColor: options.ringColor,
+    ringShadow: options.ringShadow,
+    ringAnimation: options.ringAnimation,
+    pointerColor: options.pointerColor,
+    buttonColor: options.buttonColor,
+    buttonShadow: options.buttonShadow,
+    buttonAnimation: options.buttonAnimation,
+    winCardRedeemButtonColorTop: options.winCardRedeemButtonColorTop,
+    winCardRedeemButtonColorBottom: options.winCardRedeemButtonColorBottom,
+    winCardRedeemButtonTextColor: options.winCardRedeemButtonTextColor
+  };
+  const key = JSON.stringify(styleConfig);
+  if (_injectedThemeKey$1 === key) return;
+
+  // Remove old stylesheet if exists (SSR-safe)
+  const existing = _isBrowser$1 ? document.querySelector('style[data-spin-wheel-sdk]') : null;
+  if (existing) existing.remove();
+  _injectedThemeKey$1 = key;
+  const style = document.createElement('style');
+  style.setAttribute('data-spin-wheel-sdk', '');
+  style.textContent = buildCSS(styleConfig, hexToRGBA);
+  document.head.appendChild(style);
+}
+
+/* ------------------------------------------------------------------ */
+/*  SpinWheel class                                                    */
+/* ------------------------------------------------------------------ */
+
+class SpinWheelInstance {
+  /**
+   * @param {SpinWheelOptions} opts
+   */
+  constructor(opts) {
+    if (!_isBrowser$1) {
+      throw new Error('[SpinWheel] SpinWheel requires a browser environment (window + document).');
+    }
+
+    // ── validate options ──
+    _validateOptions$1(opts);
+
+    /** @type {SpinWheelOptions} */
+    this.options = deepMerge({}, DEFAULTS$1, opts);
+
+    // Ensure theme is properly merged
+    this.options.theme = {
+      ...DEFAULTS$1.theme,
+      ...(opts.theme || {})
+    };
+
+    /** Current cumulative rotation in degrees */
+    this.currentRotation = 0;
+
+    /** Whether the wheel is currently animating */
+    this.isSpinning = false;
+
+    /** Set to true after .destroy() */
+    this._destroyed = false;
+
+    /** Last prize won */
+    this._lastWonPrize = null;
+
+    /** Last won index */
+    this._lastWonIndex = -1;
+
+    /** Number of spins performed */
+    this._spinCount = 0;
+
+    /** Active requestAnimationFrame ID (for cancellation on destroy) */
+    this._rafId = null;
+
+    /** Bound listeners stored for removal in destroy() */
+    this._boundListeners = {};
+
+    // ── resolve container ──
+    this.containerEl = typeof this.options.container === 'string' ? document.querySelector(this.options.container) : this.options.container;
+    if (!this.containerEl) {
+      throw new Error('[SpinWheel] container not found. Ensure the container element exists in the DOM.');
+    }
+
+    /** Angle per segment in degrees */
+    this.segmentAngle = 360 / this.options.segments.length;
+
+    // ── inject CSS (idempotent) ──
+    injectCSS$1(this.options);
+
+    // ── DOM refs (set in _build) ──
+    /** @type {HTMLElement} */
+    this._rootEl = null;
+    /** @type {HTMLElement} */
+    this._wheelEl = null;
+    /** @type {HTMLElement} */
+    this._hubEl = null;
+    /** @type {HTMLElement} */
+    this._pointerEl = null;
+    /** @type {HTMLButtonElement} */
+    this._btnEl = null;
+    /** @type {HTMLElement} */
+    this._overlayEl = null;
+    /** @type {HTMLElement} */
+    this._confettiEl = null;
+    /** @type {HTMLElement} */
+    this._cardProductEl = null;
+    /** @type {HTMLElement} */
+    this._cardBrandEl = null;
+    /** @type {HTMLElement} */
+    this._cardTitleEl = null;
+    /** @type {HTMLElement} */
+    this._cardWorthEl = null;
+    /** @type {HTMLInputElement} */
+    this._cardCodeEl = null;
+    /** @type {HTMLButtonElement} */
+    this._cardCopyEl = null;
+    /** @type {HTMLElement} */
+    this._cardRedeemEl = null;
+    /** @type {HTMLElement} */
+    this._cardRedeemTextEl = null;
+
+    // ── build & bind ──
+    this._build();
+    this._bind();
+  }
+
+  /* ================================================================ */
+  /*  DOM construction                                                 */
+  /* ================================================================ */
+
+  /** Build the full widget DOM tree and attach it to the container. */
+  _build() {
+    const o = this.options;
+
+    // ── root wrapper ──
+    const root = document.createElement('div');
+    root.className = 'sw-root';
+
+    // ── header (optional) ──
+    if (o.headerTitle) {
+      const header = document.createElement('header');
+      header.className = 'sw-header';
+      const parts = o.headerTitle.split('&');
+      header.innerHTML = `<h1 class="sw-title">` + `<span class="sw-spin-text">${escapeHtml(parts[0] || 'Spin')}</span>` + `${parts.length > 1 ? ` <span class="sw-win-text">& ${escapeHtml(parts[1])}</span>` : ''}` + `</h1>` + (o.headerSubtitle ? `<p class="sw-subtitle">${escapeHtml(o.headerSubtitle)}</p>` : '');
+      root.appendChild(header);
+    }
+
+    // ── wheel container ──
+    const wc = document.createElement('div');
+    wc.className = 'sw-wheel-container';
+    const wo = document.createElement('div');
+    wo.className = 'sw-wheel-outer';
+    const wi = document.createElement('div');
+    wi.className = 'sw-wheel-inner';
+    const wheel = document.createElement('div');
+    wheel.className = 'sw-wheel';
+    this._wheelEl = wheel;
+    this._buildSegments(wheel);
+
+    // hub
+    const hub = document.createElement('div');
+    hub.className = 'sw-wheel-hub';
+    hub.title = 'Spin the wheel';
+    hub.innerHTML = `<span class="sw-wheel-hub-icon">${escapeHtml(o.hubIcon)}</span>` + `<span class="sw-wheel-hub-brand">${escapeHtml(o.hubLabel)}</span>`;
+    this._hubEl = hub;
+    wi.append(wheel, hub);
+    wo.appendChild(wi);
+    wc.appendChild(wo);
+
+    // pointer
+    const pointer = document.createElement('div');
+    pointer.className = 'sw-pointer';
+    pointer.innerHTML = '<div class="sw-pointer-outer"></div>';
+    this._pointerEl = pointer;
+    wc.appendChild(pointer);
+    root.appendChild(wc);
+
+    // ── spin button ──
+    if (o.showButton) {
+      const btn = document.createElement('button');
+      btn.className = 'sw-spin-btn';
+      btn.type = 'button';
+      btn.textContent = o.buttonText;
+      this._btnEl = btn;
+      root.appendChild(btn);
+    }
+    this.containerEl.appendChild(root);
+    this._rootEl = root;
+
+    // ── overlay ──
+    if (o.showWinCard) {
+      this._buildOverlay();
+    }
+  }
+
+  /**
+   * Render pie-slice segments into the given wheel element.
+   * @param {HTMLElement} wheel
+   */
+  _buildSegments(wheel) {
+    const angle = this.segmentAngle;
+    const clip = buildClipPath(angle);
+    const rot = textRotation(angle);
+    const segments = this.options.segments;
+    for (let i = 0; i < segments.length; i++) {
+      const p = segments[i];
+      const seg = document.createElement('div');
+      seg.className = 'sw-segment';
+      seg.style.transform = `rotate(${i * angle}deg)`;
+      seg.style.clipPath = clip;
+      seg.style.webkitClipPath = clip;
+      seg.style.background = p.color || '#ccc';
+      seg.innerHTML = `<div class="sw-segment-content" style="transform:rotate(${rot}deg)">` + `<span class="sw-segment-icon">${escapeHtml(p.icon || '')}</span>` + `<span class="sw-segment-label">${escapeHtml(p.label)}</span>` + `</div>`;
+      wheel.appendChild(seg);
+    }
+  }
+
+  /** Build the win-card overlay and append it to <body>. */
+  _buildOverlay() {
+    const o = this.options;
+    const brandLabel = o.winCardBrandLabel || o.hubLabel;
+    const redeemText = o.winCardRedeemButtonText || 'Redeem Now';
+    const overlay = document.createElement('div');
+    overlay.className = 'sw-overlay';
+    const confetti = document.createElement('div');
+    confetti.className = 'sw-confetti';
+    this._confettiEl = confetti;
+    const card = document.createElement('div');
+    card.className = 'sw-win-card';
+    card.innerHTML = `<div class="sw-win-card-top">` + `  <div class="sw-win-card-product">🎁</div>` + `  <div class="sw-win-card-brand">${escapeHtml(brandLabel)}</div>` + `</div>` + `<div class="sw-win-card-perf"></div>` + `<div class="sw-win-card-mid">` + `  <div class="sw-win-card-title">Prize</div>` + `  <div class="sw-win-card-worth">${escapeHtml(o.winCardWorthLabel)} ₹99</div>` + `  <div class="sw-win-card-code-wrap">` + `    <input type="text" class="sw-win-card-code" readonly value="XXXXXXXXX" />` + `    <button type="button" class="sw-win-card-copy" aria-label="Copy code">${COPY_ICON_SVG}</button>` + `  </div>` + `</div>` + `<div class="sw-win-card-bot">` + `  <span class="sw-win-card-redeem">${escapeHtml(redeemText)}</span>` + `  ${ARROW_ICON_SVG}` + `</div>`;
+    overlay.append(confetti, card);
+    this.containerEl.appendChild(overlay);
+    this._overlayEl = overlay;
+    this._cardProductEl = card.querySelector('.sw-win-card-product');
+    this._cardBrandEl = card.querySelector('.sw-win-card-brand');
+    this._cardTitleEl = card.querySelector('.sw-win-card-title');
+    this._cardWorthEl = card.querySelector('.sw-win-card-worth');
+    this._cardCodeEl = card.querySelector('.sw-win-card-code');
+    this._cardCopyEl = card.querySelector('.sw-win-card-copy');
+    this._cardRedeemEl = card.querySelector('.sw-win-card-bot');
+    this._cardRedeemTextEl = card.querySelector('.sw-win-card-redeem');
+  }
+
+  /* ================================================================ */
+  /*  Event binding                                                    */
+  /* ================================================================ */
+
+  /** Wire up all interactive event listeners with proper references for cleanup. */
+  _bind() {
+    const bl = this._boundListeners;
+
+    // Spin button
+    if (this._btnEl) {
+      bl._btnClick = () => this.spin();
+      this._btnEl.addEventListener('click', bl._btnClick);
+    }
+
+    // Hub click + keyboard (Enter / Space)
+    if (this._hubEl) {
+      this._hubEl.setAttribute('tabindex', '0');
+      this._hubEl.setAttribute('role', 'button');
+      this._hubEl.setAttribute('aria-label', 'Spin the wheel');
+      bl._hubClick = e => {
+        e.stopPropagation();
+        this.spin();
+      };
+      bl._hubKeydown = e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.spin();
+        }
+      };
+      this._hubEl.addEventListener('click', bl._hubClick);
+      this._hubEl.addEventListener('keydown', bl._hubKeydown);
+    }
+
+    // Keyboard: Enter/Space on spin button
+    if (this._btnEl) {
+      bl._btnKeydown = e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.spin();
+        }
+      };
+      this._btnEl.addEventListener('keydown', bl._btnKeydown);
+    }
+
+    // Overlay events
+    if (this._overlayEl) {
+      bl._overlayClick = e => {
+        if (e.target === this._overlayEl) this.hideWinCard();
+      };
+      this._overlayEl.addEventListener('click', bl._overlayClick);
+      bl._copyClick = e => {
+        e.stopPropagation();
+        const code = this._cardCodeEl.value;
+        this._cardCodeEl.select();
+        this._cardCodeEl.setSelectionRange(0, 999);
+        if (navigator.clipboard?.writeText) {
+          navigator.clipboard.writeText(code).then(() => this._showCopied());
+        } else {
+          try {
+            document.execCommand('copy');
+            this._showCopied();
+          } catch (_) {/* noop */}
+        }
+      };
+      this._cardCopyEl.addEventListener('click', bl._copyClick);
+      bl._redeemClick = e => {
+        e.stopPropagation();
+        if (typeof this.options.onRedeem === 'function') {
+          try {
+            this.options.onRedeem(this._lastWonPrize);
+          } catch (err) {
+            console.error('[SpinWheel] onRedeem callback error:', err);
+          }
+        }
+        if (this.options.redeemUrl) {
+          window.open(this.options.redeemUrl, '_blank', 'noopener,noreferrer');
+        }
+        this.hideWinCard();
+      };
+      this._cardRedeemEl.addEventListener('click', bl._redeemClick);
+    }
+
+    // Global keyboard: Escape closes win card
+    bl._docKeydown = e => {
+      if (e.key === 'Escape' && this._overlayEl?.classList.contains('sw-visible')) {
+        this.hideWinCard();
+      }
+    };
+    document.addEventListener('keydown', bl._docKeydown);
+  }
+
+  /** Temporarily swap the copy button icon to a checkmark. */
+  _showCopied() {
+    if (!this._cardCopyEl || this._destroyed) return;
+    this._cardCopyEl.innerHTML = CHECK_ICON_SVG;
+    setTimeout(() => {
+      if (this._cardCopyEl) this._cardCopyEl.innerHTML = COPY_ICON_SVG;
+    }, 1500);
+  }
+
+  /* ================================================================ */
+  /*  Public API                                                       */
+  /* ================================================================ */
+
+  /**
+   * Check if spin limit has been reached.
+   * @returns {boolean}
+   */
+  _isSpinLimitReached() {
+    const limit = this.options.spinLimit;
+    return typeof limit === 'number' && limit > 0 && this._spinCount >= limit;
+  }
+
+  /**
+   * Spin the wheel.
+   * Priority: forceIndex > options.winningIndex > random.
+   * @param {number} [forceIndex] – optional index to force the result (overrides winningIndex)
+   */
+  spin(forceIndex) {
+    if (this.isSpinning || this._destroyed) return;
+
+    // Check spin limit
+    if (this._isSpinLimitReached()) {
+      if (typeof this.options.onSpinLimitReached === 'function') {
+        try {
+          this.options.onSpinLimitReached(this._spinCount);
+        } catch (err) {
+          console.error('[SpinWheel] onSpinLimitReached callback error:', err);
+        }
+      }
+      return;
+    }
+    this.isSpinning = true;
+    this._spinCount++;
+    if (this._btnEl) this._btnEl.disabled = true;
+    if (this._wheelEl) this._wheelEl.classList.add('sw-spinning');
+    const {
+      segments,
+      minSpins,
+      maxSpins,
+      spinDuration,
+      winningIndex
+    } = this.options;
+    const count = segments.length;
+    const segAngle = this.segmentAngle;
+
+    // Resolve winning index: forceIndex > winningIndex > random
+    // Clamp forceIndex to valid range if provided
+    const isValidIndex = idx => typeof idx === 'number' && !isNaN(idx) && idx >= 0 && idx < count;
+    let winIndex;
+    if (forceIndex !== undefined && forceIndex !== null) {
+      if (typeof forceIndex === 'number' && !isNaN(forceIndex)) {
+        winIndex = Math.max(0, Math.min(count - 1, Math.floor(forceIndex)));
+      } else {
+        console.warn(`[SpinWheel] spin(forceIndex): invalid forceIndex "${forceIndex}". Using random.`);
+        winIndex = Math.floor(Math.random() * count);
+      }
+    } else if (isValidIndex(winningIndex)) {
+      winIndex = winningIndex;
+    } else {
+      winIndex = Math.floor(Math.random() * count);
+    }
+    if (typeof this.options.onSpinStart === 'function') {
+      try {
+        this.options.onSpinStart(winIndex);
+      } catch (err) {
+        console.error('[SpinWheel] onSpinStart callback error:', err);
+      }
+    }
+    const segmentCenter = winIndex * segAngle + segAngle / 2;
+    const fullSpins = (minSpins || 5) + Math.floor(Math.random() * ((maxSpins || 8) - (minSpins || 5) + 1));
+    const pointerAt = 270;
+    const remainder = (pointerAt - segmentCenter - this.currentRotation % 360 + 720) % 360;
+    const targetAngle = 360 * fullSpins + remainder;
+    const totalRotation = this.currentRotation + targetAngle;
+    const duration = spinDuration || 5000;
+    const startTime = performance.now();
+    const startRot = this.currentRotation;
+    const animate = now => {
+      if (this._destroyed) return;
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeOut = 1 - Math.pow(1 - progress, 3);
+      const rotation = startRot + targetAngle * easeOut;
+      if (this._wheelEl) this._wheelEl.style.transform = `rotate(${rotation}deg)`;
+      if (progress < 1) {
+        this._rafId = requestAnimationFrame(animate);
+      } else {
+        this.currentRotation = totalRotation % 360;
+        if (this._wheelEl) {
+          this._wheelEl.classList.remove('sw-spinning');
+          this._wheelEl.style.transform = `rotate(${this.currentRotation}deg)`;
+        }
+        this._highlightPointer();
+        this._lastWonPrize = segments[winIndex];
+        this._lastWonIndex = winIndex;
+        if (typeof this.options.onSpinEnd === 'function') {
+          try {
+            this.options.onSpinEnd(segments[winIndex], winIndex);
+          } catch (err) {
+            console.error('[SpinWheel] onSpinEnd callback error:', err);
+          }
+        }
+        if (this.options.showWinCard) {
+          this._showWinCard(segments[winIndex]);
+        }
+        this.isSpinning = false;
+
+        // Re-enable button only if spin limit not reached
+        if (this._btnEl) {
+          this._btnEl.disabled = this._isSpinLimitReached();
+        }
+      }
+    };
+    this._rafId = requestAnimationFrame(animate);
+  }
+
+  /** Bounce the pointer for visual feedback. */
+  _highlightPointer() {
+    if (!this._pointerEl || this._destroyed) return;
+    this._pointerEl.classList.remove('sw-highlight');
+    void this._pointerEl.offsetHeight; // force reflow
+    this._pointerEl.classList.add('sw-highlight');
+    setTimeout(() => this._pointerEl.classList.remove('sw-highlight'), 500);
+  }
+
+  /**
+   * Populate and reveal the win-card overlay.
+   * @param {SegmentConfig} prize
+   */
+  _showWinCard(prize) {
+    if (!prize || this._destroyed) return;
+    const o = this.options;
+
+    // Update product icon and background
+    if (this._cardProductEl) {
+      this._cardProductEl.textContent = prize.icon || '🎁';
+      this._cardProductEl.style.background = `linear-gradient(145deg,${prize.color || '#252530'}22,${prize.color || '#1c1c24'}11)`;
+    }
+
+    // Update title
+    if (this._cardTitleEl) {
+      this._cardTitleEl.textContent = prize.title || prize.label || '';
+    }
+
+    // Update worth label with configurable prefix
+    if (this._cardWorthEl) {
+      const worthLabel = o.winCardWorthLabel || 'WORTH';
+      this._cardWorthEl.textContent = prize.worth ? `${worthLabel} ${prize.worth}` : '';
+      this._cardWorthEl.style.display = prize.worth ? '' : 'none';
+    }
+
+    // Handle code generation/display
+    if (this._cardCodeEl) {
+      if (o.generateCode) {
+        this._cardCodeEl.value = prize.code || randomCode(o.codeLength);
+        if (this._cardCodeEl.parentElement) this._cardCodeEl.parentElement.style.display = '';
+      } else if (prize.code) {
+        this._cardCodeEl.value = prize.code;
+        if (this._cardCodeEl.parentElement) this._cardCodeEl.parentElement.style.display = '';
+      } else {
+        if (this._cardCodeEl.parentElement) this._cardCodeEl.parentElement.style.display = 'none';
+      }
+    }
+
+    // Update redeem button text if configured
+    if (this._cardRedeemTextEl && o.winCardRedeemButtonText) {
+      this._cardRedeemTextEl.textContent = o.winCardRedeemButtonText;
+    }
+
+    // Create confetti only if enabled (and no reduced motion preference)
+    if (o.confettiOnWin !== false && !_prefersReducedMotion$1()) {
+      this._createConfetti();
+    }
+    if (this._overlayEl) this._overlayEl.classList.add('sw-visible');
+
+    // A11y: announce the win to screen readers
+    this._announceToScreenReader(`You won ${prize.title || prize.label || 'a prize'}${prize.worth ? ', worth ' + prize.worth : ''}.`);
+  }
+
+  /** Programmatically close the win-card overlay. */
+  hideWinCard() {
+    if (this._overlayEl) this._overlayEl.classList.remove('sw-visible');
+  }
+
+  /** Generate confetti particles inside the overlay. */
+  _createConfetti() {
+    if (!this._confettiEl || this._destroyed) return;
+    const o = this.options;
+    const colors = o.confettiColors || CONFETTI_COLORS;
+    const count = o.confettiCount || 40;
+    this._confettiEl.innerHTML = '';
+    for (let i = 0; i < count; i++) {
+      const span = document.createElement('span');
+      span.style.left = `${Math.random() * 100}%`;
+      span.style.top = '-10px';
+      span.style.background = colors[Math.floor(Math.random() * colors.length)];
+      span.style.animationDelay = `${Math.random() * 0.3}s`;
+      span.style.animationDuration = `${0.8 + Math.random() * 0.6}s`;
+      this._confettiEl.appendChild(span);
+    }
+  }
+
+  /**
+   * Replace all segments at runtime and re-render the wheel.
+   * @param {SegmentConfig[]} newSegments
+   */
+  updateSegments(newSegments) {
+    if (this._destroyed) return;
+    if (!Array.isArray(newSegments) || newSegments.length < 2) {
+      console.warn('[SpinWheel] updateSegments: at least 2 segments are required. Ignoring.');
+      return;
+    }
+    this.options.segments = newSegments;
+    this.segmentAngle = 360 / newSegments.length;
+    if (this._wheelEl) {
+      this._wheelEl.innerHTML = '';
+      this._buildSegments(this._wheelEl);
+    }
+    this.currentRotation = 0;
+    if (this._wheelEl) this._wheelEl.style.transform = 'rotate(0deg)';
+  }
+
+  /**
+   * Remove all SDK-created DOM, event listeners, and animation frames.
+   * Safe to call multiple times.
+   */
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+
+    // ── Cancel pending animation frame ──
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+
+    // ── Remove all event listeners ──
+    const bl = this._boundListeners;
+    if (bl._btnClick && this._btnEl) {
+      this._btnEl.removeEventListener('click', bl._btnClick);
+      this._btnEl.removeEventListener('keydown', bl._btnKeydown);
+    }
+    if (bl._hubClick && this._hubEl) {
+      this._hubEl.removeEventListener('click', bl._hubClick);
+      this._hubEl.removeEventListener('keydown', bl._hubKeydown);
+    }
+    if (bl._overlayClick && this._overlayEl) {
+      this._overlayEl.removeEventListener('click', bl._overlayClick);
+    }
+    if (bl._copyClick && this._cardCopyEl) {
+      this._cardCopyEl.removeEventListener('click', bl._copyClick);
+    }
+    if (bl._redeemClick && this._cardRedeemEl) {
+      this._cardRedeemEl.removeEventListener('click', bl._redeemClick);
+    }
+    if (bl._docKeydown) {
+      document.removeEventListener('keydown', bl._docKeydown);
+    }
+    this._boundListeners = {};
+
+    // ── Remove live-region ──
+    if (this._liveRegion?.parentNode) {
+      this._liveRegion.parentNode.removeChild(this._liveRegion);
+    }
+
+    // ── Remove DOM ──
+    this._rootEl?.parentNode?.removeChild(this._rootEl);
+    this._overlayEl?.parentNode?.removeChild(this._overlayEl);
+
+    // Clear all DOM references to prevent memory leaks
+    this._rootEl = null;
+    this._wheelEl = null;
+    this._hubEl = null;
+    this._pointerEl = null;
+    this._btnEl = null;
+    this._overlayEl = null;
+    this._confettiEl = null;
+    this._cardProductEl = null;
+    this._cardBrandEl = null;
+    this._cardTitleEl = null;
+    this._cardWorthEl = null;
+    this._cardCodeEl = null;
+    this._cardCopyEl = null;
+    this._cardRedeemEl = null;
+    this._cardRedeemTextEl = null;
+    this._liveRegion = null;
+  }
+
+  /** The last prize that was won. */
+  get lastWonPrize() {
+    return this._lastWonPrize;
+  }
+
+  /** The last won segment index. */
+  get lastWonIndex() {
+    return this._lastWonIndex;
+  }
+
+  /** The current spin count. */
+  get spinCount() {
+    return this._spinCount;
+  }
+
+  /** The remaining spins (null if unlimited). */
+  get remainingSpins() {
+    const limit = this.options.spinLimit;
+    if (typeof limit !== 'number' || limit <= 0) return null;
+    return Math.max(0, limit - this._spinCount);
+  }
+
+  /**
+   * Reset the spin count to allow more spins.
+   * @param {number} [count=0] - New spin count to set
+   */
+  resetSpinCount(count = 0) {
+    this._spinCount = Math.max(0, typeof count === 'number' && !isNaN(count) ? Math.floor(count) : 0);
+    if (this._btnEl) {
+      this._btnEl.disabled = this._isSpinLimitReached();
+    }
+  }
+
+  /**
+   * Announce a message to screen readers via a visually hidden aria-live region.
+   * @param {string} message
+   */
+  _announceToScreenReader(message) {
+    if (!_isBrowser$1) return;
+    if (!this._liveRegion) {
+      const el = document.createElement('div');
+      el.setAttribute('aria-live', 'assertive');
+      el.setAttribute('aria-atomic', 'true');
+      el.setAttribute('role', 'status');
+      el.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';
+      document.body.appendChild(el);
+      this._liveRegion = el;
+    }
+    this._liveRegion.textContent = '';
+    // Slight delay so screen readers pick up the change
+    setTimeout(() => {
+      if (this._liveRegion) this._liveRegion.textContent = message;
+    }, 100);
+  }
+
+  /**
+   * Update configuration options at runtime.
+   * @param {Partial<SpinWheelOptions>} newOptions
+   */
+  updateOptions(newOptions) {
+    if (this._destroyed) return;
+    if (!newOptions || typeof newOptions !== 'object') {
+      console.warn('[SpinWheel] updateOptions: argument must be an object. Ignoring.');
+      return;
+    }
+
+    // Sanitize numeric/enum values before merging
+    const merged = {
+      ...this.options,
+      ...newOptions,
+      container: this.options.container,
+      segments: this.options.segments
+    };
+    _validateOptions$1(merged);
+    // Apply sanitized values back
+    for (const key of Object.keys(newOptions)) {
+      if (key in merged) newOptions[key] = merged[key];
+    }
+
+    // Merge new options
+    this.options = deepMerge({}, this.options, newOptions);
+
+    // Handle theme separately for proper nested merge
+    if (newOptions.theme) {
+      this.options.theme = {
+        ...DEFAULTS$1.theme,
+        ...this.options.theme,
+        ...newOptions.theme
+      };
+    }
+
+    // Re-inject CSS if styling options changed
+    injectCSS$1(this.options);
+
+    // Update button text if changed
+    if (this._btnEl && newOptions.buttonText !== undefined) {
+      this._btnEl.textContent = this.options.buttonText;
+    }
+
+    // Update hub if changed
+    if (this._hubEl) {
+      if (newOptions.hubLabel !== undefined || newOptions.hubIcon !== undefined) {
+        this._hubEl.innerHTML = `<span class="sw-wheel-hub-icon">${escapeHtml(this.options.hubIcon)}</span>` + `<span class="sw-wheel-hub-brand">${escapeHtml(this.options.hubLabel)}</span>`;
+      }
+    }
+
+    // Update win card brand label if changed
+    if (this._cardBrandEl && (newOptions.winCardBrandLabel !== undefined || newOptions.hubLabel !== undefined)) {
+      const brandLabel = this.options.winCardBrandLabel || this.options.hubLabel;
+      this._cardBrandEl.textContent = brandLabel;
+    }
+
+    // Update redeem button text if changed
+    if (this._cardRedeemTextEl && newOptions.winCardRedeemButtonText !== undefined) {
+      this._cardRedeemTextEl.textContent = this.options.winCardRedeemButtonText;
+    }
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Public factory (namespace)                                         */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Static factory to create a SpinWheel instance.
+ *
+ * @example
+ *   const wheel = SpinWheel.init({ container: '#app', segments: [...] });
+ */
+class SpinWheel {
+  /**
+   * Initialise and mount a new Spin Wheel.
+   * @param {SpinWheelOptions} options
+   * @returns {SpinWheelInstance}
+   */
+  static init(options) {
+    return new SpinWheelInstance(options);
+  }
+
+  /** The underlying class – useful for `instanceof` checks or subclassing. */
+  static Instance = SpinWheelInstance;
+
+  /** Current SDK version – kept in sync with package.json via build banner */
+  static VERSION = '0.1.0-alpha.1';
+
+  /** Export defaults for reference */
+  static DEFAULTS = DEFAULTS$1;
+}
+
+/**
+ * SpinWheel React Component (ES6 class-based wrapper)
+ *
+ * @example
+ *   import { SpinWheelReact } from 'spin-wheel-sdk/react';
+ *
+ *   <SpinWheelReact
+ *     ref={wheelRef}
+ *     segments={[...]}
+ *     onSpinEnd={(prize, idx) => console.log(prize)}
+ *   />
+ */
+
+/**
+ * All supported prop keys for SpinWheelReact component.
+ * Used for copying props to SDK options.
+ */
+const PROP_KEYS$1 = Object.freeze([
+// Core
+'segments', 'winningIndex',
+// Spin Behavior
+'spinDuration', 'minSpins', 'maxSpins', 'spinLimit',
+// Header UI
+'headerTitle', 'headerSubtitle', 'titleColor', 'subtitleColor',
+// Hub
+'hubLabel', 'hubIcon',
+// Spin Button
+'showButton', 'buttonText',
+// Wheel Appearance
+'backgroundColor', 'backgroundImage', 'ringColor', 'ringShadow', 'ringAnimation', 'pointerColor', 'buttonColor', 'buttonShadow', 'buttonAnimation',
+// Win Card
+'showWinCard', 'generateCode', 'codeLength', 'redeemUrl', 'winCardBrandLabel', 'winCardWorthLabel', 'winCardRedeemButtonText', 'winCardRedeemButtonColorTop', 'winCardRedeemButtonColorBottom', 'winCardRedeemButtonTextColor',
+// Confetti
+'confettiOnWin', 'confettiColors', 'confettiCount',
+// Theme
+'theme']);
+
+/**
+ * Creates the SpinWheelReact component using the provided React instance.
+ * This factory pattern avoids bundling React into the SDK.
+ *
+ * @param {typeof import('react')} React – the React module
+ * @returns {{ SpinWheelReact: React.ForwardRefExoticComponent }}
+ */
+function createSpinWheelReact(React) {
+  const {
+    useEffect,
+    useRef,
+    useImperativeHandle,
+    forwardRef,
+    createElement
+  } = React;
+  const SpinWheelReact = forwardRef(function SpinWheelReact(props, ref) {
+    const containerRef = useRef(null);
+    const instanceRef = useRef(null);
+
+    // Keep latest callbacks in a ref so they're always fresh
+    const callbacksRef = useRef({});
+    callbacksRef.current.onSpinStart = props.onSpinStart;
+    callbacksRef.current.onSpinEnd = props.onSpinEnd;
+    callbacksRef.current.onRedeem = props.onRedeem;
+    callbacksRef.current.onSpinLimitReached = props.onSpinLimitReached;
+
+    // Mount the SDK once, destroy on unmount (SSR-safe)
+    useEffect(() => {
+      if (!containerRef.current || typeof window === 'undefined') return;
+      const opts = {};
+
+      // Copy only defined props
+      PROP_KEYS$1.forEach(k => {
+        if (props[k] !== undefined) opts[k] = props[k];
+      });
+      opts.container = containerRef.current;
+
+      // Wrap callbacks so they always point to latest prop
+      opts.onSpinStart = idx => callbacksRef.current.onSpinStart?.(idx);
+      opts.onSpinEnd = (prize, idx) => callbacksRef.current.onSpinEnd?.(prize, idx);
+      opts.onRedeem = prize => callbacksRef.current.onRedeem?.(prize);
+      opts.onSpinLimitReached = count => callbacksRef.current.onSpinLimitReached?.(count);
+      try {
+        instanceRef.current = SpinWheel.init(opts);
+      } catch (err) {
+        console.error('[SpinWheelReact] Failed to initialize SpinWheel:', err);
+      }
+      return () => {
+        try {
+          instanceRef.current?.destroy();
+        } catch (_) {/* noop */}
+        instanceRef.current = null;
+      };
+    }, []); // mount-only
+
+    // Live-update segments when the prop changes
+    useEffect(() => {
+      if (instanceRef.current && props.segments) {
+        try {
+          instanceRef.current.updateSegments(props.segments);
+        } catch (_) {/* ignore on first mount */}
+      }
+    }, [props.segments]);
+
+    // Expose imperative handle
+    useImperativeHandle(ref, () => ({
+      /** Trigger a spin (optionally force the winning index) */
+      spin(forceIndex) {
+        instanceRef.current?.spin(forceIndex);
+      },
+      /** Replace segments at runtime */
+      updateSegments(segs) {
+        instanceRef.current?.updateSegments(segs);
+      },
+      /** Close the win-card overlay */
+      hideWinCard() {
+        instanceRef.current?.hideWinCard();
+      },
+      /** Update options at runtime */
+      updateOptions(opts) {
+        instanceRef.current?.updateOptions(opts);
+      },
+      /** Reset the spin count */
+      resetSpinCount(count) {
+        instanceRef.current?.resetSpinCount(count);
+      },
+      /** Get the current spin count */
+      get spinCount() {
+        return instanceRef.current?.spinCount;
+      },
+      /** Get remaining spins (null if unlimited) */
+      get remainingSpins() {
+        return instanceRef.current?.remainingSpins;
+      },
+      /** Get the last won prize */
+      get lastWonPrize() {
+        return instanceRef.current?.lastWonPrize;
+      },
+      /** Get the last won index */
+      get lastWonIndex() {
+        return instanceRef.current?.lastWonIndex;
+      },
+      /** Access the raw SpinWheelInstance */
+      get instance() {
+        return instanceRef.current;
+      }
+    }), []);
+    return createElement('div', {
+      ref: containerRef,
+      className: props.className || '',
+      style: props.style || {}
+    });
+  });
+  SpinWheelReact.displayName = 'SpinWheelReact';
+  return SpinWheelReact;
+}
+if (typeof window !== 'undefined' && window.React) {
+  createSpinWheelReact(window.React);
+}
+
+/**
+ * Generates the ScratchCard SDK stylesheet as a string, interpolated with theme colors.
+ * @param {object} config - Style configuration object
+ * @param {object} config.theme - Theme colors
+ * @param {string} [config.headerTitleColor] - Custom header title color
+ * @param {string} [config.instructionColor] - Custom instruction color
+ * @param {string} [config.coinGradientStart] - Coin gradient start color
+ * @param {string} [config.coinGradientEnd] - Coin gradient end color
+ * @param {string} [config.cardBackground] - Card background gradient
+ * @param {boolean} [config.cardShadow] - Enable card shadow
+ * @param {number} [config.cardBorderRadius] - Card border radius
+ * @param {string} [config.scratchZoneBackground] - Scratch zone background
+ * @param {boolean} [config.scratchZoneShadow] - Enable scratch zone shadow
+ * @param {number} [config.scratchZoneBorderRadius] - Scratch zone border radius
+ * @param {string} [config.prizeTextColor] - Prize text color
+ * @param {string} [config.prizeNameColor] - Prize name color
+ * @param {string} [config.prizeIconBackground] - Prize icon background
+ * @param {string} [config.giftIconBackground] - Gift icon background
+ * @param {string} [config.modalTitleColor] - Modal title color
+ * @param {string} [config.modalButtonColor] - Modal button gradient
+ * @param {string} [config.modalButtonTextColor] - Modal button text color
+ * @param {boolean} [config.modalBackdropBlur] - Enable modal backdrop blur
+ * @param {string} [config.animationType] - Animation type
+ * @param {number} [config.animationDuration] - Animation duration
+ * @param {function} hexToRGBA
+ * @returns {string}
+ */
+function buildScratchCSS(config, hexToRGBA) {
+  const t = config.theme || {};
+
+  // Extract theme colors with fallbacks
+  const purpleDark = t.purpleDark || '#4a2c6a';
+  const purpleMid = t.purpleMid || '#6b4a8a';
+  const purpleLight = t.purpleLight || '#8b6baa';
+  const gold = t.gold || '#d4a84b';
+  const goldLight = t.goldLight || '#e8c547';
+  const goldDark = t.goldDark || '#b8923a';
+  const white = t.white || '#ffffff';
+  const textDark = t.textDark || '#2d2d2d';
+  const textMuted = t.textMuted || '#6b6b6b';
+
+  // Configurable colors
+  const headerTitleColor = config.headerTitleColor || textDark;
+  const instructionColor = config.instructionColor || textMuted;
+  const coinStart = config.coinGradientStart || goldLight;
+  const coinEnd = config.coinGradientEnd || goldDark;
+  const prizeTextColor = config.prizeTextColor || 'rgba(255,255,255,0.95)';
+  const prizeNameColor = config.prizeNameColor || goldLight;
+  const prizeIconBg = config.prizeIconBackground || 'rgba(255,255,255,0.15)';
+  const giftIconBg = config.giftIconBackground || 'rgba(255,255,255,0.25)';
+  const modalTitleColor = config.modalTitleColor || textDark;
+  const modalBtnText = config.modalButtonTextColor || white;
+
+  // Feature toggles
+  const cardShadow = config.cardShadow !== false;
+  const scratchZoneShadow = config.scratchZoneShadow !== false;
+  const modalBackdropBlur = config.modalBackdropBlur !== false;
+
+  // Dimension configs
+  const cardBorderRadius = config.cardBorderRadius || 24;
+  const scratchZoneBorderRadius = config.scratchZoneBorderRadius || 20;
+  const animDuration = config.animationDuration || 600;
+  const animType = config.animationType || 'default';
+
+  // Background configs
+  const cardBg = config.cardBackground || `linear-gradient(180deg, #faf8fc 0%, #f0ebf5 100%)`;
+  const scratchZoneBg = config.scratchZoneBackground || `linear-gradient(145deg, ${purpleDark} 0%, ${purpleMid} 50%, #5a3a7a 100%)`;
+  const modalBtnBg = config.modalButtonColor || `linear-gradient(145deg, ${purpleMid} 0%, ${purpleDark} 100%)`;
+
+  // Computed values
+  hexToRGBA(gold, 0.4);
+
+  // Card shadow styles
+  const cardBoxShadow = cardShadow ? `box-shadow:0 4px 24px ${hexToRGBA(purpleDark, 0.12)}, 0 12px 48px rgba(0,0,0,0.08);` : '';
+
+  // Scratch zone shadow styles  
+  const zoneShadow = scratchZoneShadow ? `box-shadow:inset 0 2px 20px rgba(0,0,0,0.2), 0 8px 24px ${hexToRGBA(purpleDark, 0.35)};` : '';
+
+  // Modal backdrop blur
+  const backdropBlur = modalBackdropBlur ? 'backdrop-filter:blur(4px);' : '';
+
+  // Animation styles based on type
+  const cardAnimation = animType === 'none' ? '' : animType === 'bounce' ? `animation:sc-card-bounce ${animDuration}ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;` : `animation:sc-card-slide ${animDuration}ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;`;
+  const modalAnimation = animType === 'none' ? '' : `transition:transform ${animDuration * 0.66}ms cubic-bezier(0.34, 1.56, 0.64, 1);`;
+  return `
+/* === ScratchCard SDK v1.1 === */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
+
+.sc-root *, .sc-modal-overlay * { margin:0; padding:0; box-sizing:border-box; }
+
+.sc-root {
+  font-family:'Outfit',sans-serif;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:2rem 1rem;
+  min-height:100%;
+  background:linear-gradient(135deg, #e8e0f0 0%, #d8d0e8 50%, #e0d8f0 100%);
+  position:relative;
+  overflow:hidden;
+}
+
+.sc-page-bg {
+  position:fixed;
+  inset:0;
+  background:radial-gradient(ellipse 80% 70% at 50% 40%, ${hexToRGBA(purpleMid, 0.15)} 0%, transparent 60%);
+  pointer-events:none;
+  animation:sc-glow-pulse 4s ease-in-out infinite;
+}
+
+@keyframes sc-glow-pulse {
+  0%, 100% { opacity:1; }
+  50% { opacity:0.7; }
+}
+
+.sc-wrapper {
+  position:relative;
+  width:min(360px, 92vw);
+  ${cardAnimation}
+}
+
+@keyframes sc-card-slide {
+  from { opacity:0; transform:translateY(24px) scale(0.96); }
+  to { opacity:1; transform:translateY(0) scale(1); }
+}
+
+@keyframes sc-card-bounce {
+  0% { opacity:0; transform:scale(0.5); }
+  60% { opacity:1; transform:scale(1.05); }
+  80% { transform:scale(0.98); }
+  100% { transform:scale(1); }
+}
+
+.sc-main-card {
+  background:${cardBg};
+  border-radius:${cardBorderRadius}px;
+  padding:28px 24px 32px;
+  ${cardBoxShadow}
+}
+
+.sc-header {
+  text-align:center;
+  margin-bottom:20px;
+}
+
+.sc-header h1 {
+  font-size:1.5rem;
+  font-weight:700;
+  color:${headerTitleColor};
+  letter-spacing:-0.02em;
+}
+
+.sc-zone {
+  position:relative;
+  width:100%;
+  aspect-ratio:1.05;
+  max-height:320px;
+  border-radius:${scratchZoneBorderRadius}px;
+  overflow:hidden;
+  background:${scratchZoneBg};
+  ${zoneShadow}
+}
+
+.sc-zone:not(.sc-ready) .sc-prize-content {
+  visibility:hidden;
+}
+
+.sc-prize-content {
+  position:absolute;
+  inset:0;
+  z-index:0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  padding:20px;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 45%),
+    linear-gradient(145deg, ${purpleDark} 0%, ${purpleMid} 100%);
+}
+
+.sc-prize-content::before {
+  content:'';
+  position:absolute;
+  inset:0;
+  background-image:
+    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 25 L55 30 L35 35 L30 55 L25 35 L5 30 L25 25 Z' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.5'/%3E%3C/svg%3E"),
+    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E");
+  opacity:0.9;
+  pointer-events:none;
+}
+
+.sc-prize-text {
+  position:relative;
+  z-index:1;
+  text-align:center;
+  color:${prizeTextColor};
+  font-size:1.25rem;
+  font-weight:700;
+  text-shadow:0 2px 8px rgba(0,0,0,0.3);
+  margin-bottom:8px;
+}
+
+.sc-prize-name {
+  font-size:1.5rem;
+  font-weight:700;
+  color:${prizeNameColor};
+  text-shadow:0 0 20px ${hexToRGBA(gold, 0.5)};
+}
+
+.sc-prize-icon {
+  width:80px;
+  height:80px;
+  margin:12px auto;
+  background:${prizeIconBg};
+  border-radius:50%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size:2.5rem;
+}
+
+.sc-prize-icon-visible {
+  position:absolute;
+  left:50%;
+  top:50%;
+  margin-left:-40px;
+  margin-top:-40px;
+  width:80px;
+  height:80px;
+  background:${giftIconBg};
+  border-radius:50%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size:2.5rem;
+  z-index:11;
+  pointer-events:none;
+  box-shadow:0 4px 20px rgba(0,0,0,0.15);
+}
+
+.sc-coin {
+  position:absolute;
+  left:0;
+  top:0;
+  width:56px;
+  height:56px;
+  border-radius:50%;
+  background:linear-gradient(145deg, ${coinStart} 0%, ${gold} 30%, ${coinEnd} 70%, #9a7a2a 100%);
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,0.4),
+    inset 0 -2px 6px rgba(0,0,0,0.25),
+    0 6px 16px rgba(0,0,0,0.3);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-weight:800;
+  font-size:1.5rem;
+  color:${coinEnd};
+  text-shadow:0 1px 0 rgba(255,255,255,0.4);
+  z-index:12;
+  pointer-events:auto;
+  cursor:grab;
+  touch-action:none;
+  transition:box-shadow 0.15s ease;
+}
+
+.sc-coin:active {
+  cursor:grabbing;
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,0.3),
+    0 4px 12px rgba(0,0,0,0.35);
+}
+
+.sc-coin.dragging {
+  animation:none;
+}
+
+.sc-canvas {
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  width:100%;
+  height:100%;
+  z-index:10;
+  display:block;
+  cursor:crosshair;
+  touch-action:none;
+}
+
+.sc-instruction {
+  text-align:center;
+  margin-top:18px;
+  font-size:0.95rem;
+  color:${instructionColor};
+  font-weight:500;
+}
+
+/* Modal */
+.sc-modal-overlay {
+  position:fixed;
+  inset:0;
+  background:rgba(0,0,0,0.5);
+  ${backdropBlur}
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:1.5rem;
+  z-index:100;
+  opacity:0;
+  visibility:hidden;
+  transition:opacity 0.35s ease, visibility 0.35s ease;
+}
+
+.sc-modal-overlay.active {
+  opacity:1;
+  visibility:visible;
+}
+
+.sc-confetti-canvas {
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  pointer-events:none;
+  z-index:1;
+}
+
+.sc-modal-bg-glow {
+  position:absolute;
+  inset:0;
+  z-index:2;
+  background:radial-gradient(
+    ellipse 90% 80% at 50% 50%,
+    ${hexToRGBA(purpleMid, 0.4)} 0%,
+    ${hexToRGBA(purpleDark, 0.2)} 40%,
+    transparent 70%
+  );
+  animation:sc-modal-glow 3s ease-in-out infinite;
+}
+
+@keyframes sc-modal-glow {
+  0%, 100% { opacity:1; }
+  50% { opacity:0.85; }
+}
+
+.sc-modal-card {
+  position:relative;
+  z-index:3;
+  width:min(340px, 100%);
+  background:${white};
+  border-radius:${cardBorderRadius}px;
+  padding:32px 24px 28px;
+  box-shadow:0 24px 64px rgba(0,0,0,0.2);
+  transform:scale(0.9) translateY(20px);
+  ${modalAnimation}
+  overflow:hidden;
+}
+
+.sc-modal-overlay.active .sc-modal-card {
+  transform:scale(1) translateY(0);
+}
+
+.sc-modal-card::before {
+  content:'';
+  position:absolute;
+  top:-50%;
+  left:-50%;
+  width:200%;
+  height:200%;
+  background:radial-gradient(circle at 50% 50%, ${hexToRGBA(purpleLight, 0.08)} 0%, transparent 50%);
+  pointer-events:none;
+}
+
+.sc-modal-header {
+  text-align:center;
+  margin-bottom:20px;
+}
+
+.sc-modal-header h2 {
+  font-size:1.5rem;
+  font-weight:700;
+  color:${modalTitleColor};
+  line-height:1.3;
+}
+
+.sc-modal-prize-box {
+  background:linear-gradient(180deg, #f8f4fc 0%, #f0eaf8 100%);
+  border-radius:20px;
+  padding:28px 20px;
+  margin-bottom:24px;
+  text-align:center;
+  position:relative;
+}
+
+.sc-modal-prize-circle {
+  width:100px;
+  height:100px;
+  margin:0 auto 16px;
+  background:linear-gradient(145deg, ${purpleLight} 0%, ${purpleMid} 100%);
+  border-radius:50%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size:2.8rem;
+  box-shadow:0 8px 24px ${hexToRGBA(purpleDark, 0.3)};
+}
+
+.sc-modal-prize-box .sc-prize-label {
+  font-size:1.1rem;
+  font-weight:600;
+  color:${textDark};
+}
+
+.sc-modal-prize-box .sc-prize-name {
+  font-size:1.35rem;
+  color:${purpleMid};
+  margin-top:4px;
+}
+
+.sc-btn-claim {
+  display:block;
+  width:100%;
+  padding:16px 24px;
+  border:none;
+  border-radius:14px;
+  background:${modalBtnBg};
+  color:${modalBtnText};
+  font-family:inherit;
+  font-size:1.1rem;
+  font-weight:600;
+  cursor:pointer;
+  box-shadow:0 6px 20px ${hexToRGBA(purpleDark, 0.4)};
+  transition:transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.sc-btn-claim:hover {
+  transform:translateY(-2px);
+  box-shadow:0 8px 28px ${hexToRGBA(purpleDark, 0.5)};
+}
+
+.sc-btn-claim:active {
+  transform:translateY(0);
+}
+
+.sc-modal-terms {
+  text-align:center;
+  margin-top:16px;
+}
+
+.sc-modal-terms a {
+  font-size:0.875rem;
+  color:${textMuted};
+  text-decoration:none;
+}
+
+.sc-modal-terms a:hover {
+  color:${purpleMid};
+  text-decoration:underline;
+}
+
+/* ── prefers-reduced-motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .sc-wrapper { animation:none !important; opacity:1; transform:none; }
+  .sc-page-bg { animation:none !important; }
+  .sc-modal-bg-glow { animation:none !important; }
+  .sc-modal-card { transition:none !important; transform:scale(1) translateY(0) !important; }
+  .sc-btn-claim { transition:none !important; }
+  .sc-btn-claim:hover { transform:none !important; }
+  .sc-coin { transition:none !important; }
+}
+`;
+}
+
+/**
+ * ScratchCard SDK v1.1.0
+ *
+ * A fully dynamic, configurable Scratch Card component.
+ * ES6 class-based. Outputs: UMD · ESM · CJS via Rollup.
+ *
+ * @example
+ *   import { ScratchCard } from 'spin-wheel-sdk';
+ *
+ *   const card = ScratchCard.init({
+ *     container: '#app',
+ *     prize: { name: 'iPhone 16', icon: '📱', label: 'Congratulations!' },
+ *     onReveal(prize) { console.log(prize); },
+ *   });
+ */
+
+/* ------------------------------------------------------------------ */
+/*  Default configuration                                              */
+/* ------------------------------------------------------------------ */
+
+/** @type {ScratchCardOptions} */
+const DEFAULTS = Object.freeze({
+  // ── Core ──
+  container: null,
+  prize: null,
+  // ── Header UI ──
+  headerTitle: 'Scratch the Card to Win Exciting Prizes!',
+  headerTitleColor: null,
+  // uses theme.textDark if null
+
+  // ── Instruction ──
+  instruction: 'Scratch the card to win exciting prizes.',
+  instructionColor: null,
+  // uses theme.textMuted if null
+
+  // ── Scratch Behavior ──
+  revealThreshold: 55,
+  brushSize: 28,
+  // ── Coin (Eraser Tool) ──
+  coinSize: 56,
+  showCoin: true,
+  coinIcon: '$',
+  coinGradientStart: null,
+  // uses theme.goldLight if null
+  coinGradientEnd: null,
+  // uses theme.goldDark if null
+
+  // ── Card Appearance ──
+  cardBackground: null,
+  // uses default gradient if null
+  cardShadow: true,
+  cardBorderRadius: 24,
+  // ── Scratch Zone ──
+  scratchZoneBackground: null,
+  // uses theme gradient if null
+  scratchZoneShadow: true,
+  scratchZoneBorderRadius: 20,
+  // ── Scratch Layer ──
+  scratchLayerColor: 'rgb(150, 130, 180)',
+  scratchLayerSparkles: true,
+  scratchLayerSparkleCount: 40,
+  // ── Prize Display ──
+  prizeTextColor: null,
+  // uses white with opacity if null
+  prizeNameColor: null,
+  // uses theme.goldLight if null
+  prizeIconBackground: null,
+  // uses white with opacity if null
+
+  // ── Gift Icon (Hint) ──
+  showGiftIcon: true,
+  giftIcon: '🎁',
+  giftIconBackground: null,
+  // uses white with opacity if null
+
+  // ── Modal ──
+  showModal: true,
+  modalTitle: 'Congratulations!',
+  modalTitleColor: null,
+  // uses theme.textDark if null
+  modalButtonText: 'Claim your',
+  modalButtonColor: null,
+  // uses theme gradient if null
+  modalButtonTextColor: null,
+  // uses theme.white if null
+  modalBackdropBlur: true,
+  // ── Confetti ──
+  confettiEnabled: true,
+  confettiColors: null,
+  // uses default colors if null
+  confettiCount: 100,
+  confettiDuration: 5500,
+  // ── Animation ──
+  animationType: 'default',
+  // 'default' | 'bounce' | 'none'
+  animationDuration: 600,
+  // ── Theme Colors ──
+  theme: Object.freeze({
+    purpleDark: '#4a2c6a',
+    purpleMid: '#6b4a8a',
+    purpleLight: '#8b6baa',
+    gold: '#d4a84b',
+    goldLight: '#e8c547',
+    goldDark: '#b8923a',
+    white: '#ffffff',
+    textDark: '#2d2d2d',
+    textMuted: '#6b6b6b'
+  }),
+  // ── Callbacks ──
+  onScratchStart: null,
+  onScratchProgress: null,
+  onReveal: null,
+  onClaim: null
+});
+
+/* ------------------------------------------------------------------ */
+/*  Validation                                                         */
+/* ------------------------------------------------------------------ */
+
+function _validateOptions(opts) {
+  // Container — truly required, cannot default
+  if (!opts.container) {
+    throw new Error('[ScratchCard] "container" is required.');
+  }
+
+  // Prize — truly required, cannot default
+  if (!opts.prize || typeof opts.prize !== 'object') {
+    throw new Error('[ScratchCard] "prize" is required and must be an object.');
+  }
+  if (!opts.prize.name || typeof opts.prize.name !== 'string') {
+    throw new Error('[ScratchCard] "prize.name" is required and must be a string.');
+  }
+
+  // ── Clamp / auto-fix numeric & enum values instead of crashing ──
+
+  // revealThreshold: clamp to [10, 90]
+  if (opts.revealThreshold !== undefined) {
+    if (typeof opts.revealThreshold !== 'number' || isNaN(opts.revealThreshold)) {
+      console.warn('[ScratchCard] "revealThreshold" must be a number. Using default (55).');
+      opts.revealThreshold = DEFAULTS.revealThreshold;
+    } else if (opts.revealThreshold < 10) {
+      console.warn(`[ScratchCard] "revealThreshold" (${opts.revealThreshold}) is below 10. Clamping to 10.`);
+      opts.revealThreshold = 10;
+    } else if (opts.revealThreshold > 90) {
+      console.warn(`[ScratchCard] "revealThreshold" (${opts.revealThreshold}) is above 90. Clamping to 90.`);
+      opts.revealThreshold = 90;
+    }
+  }
+
+  // brushSize: clamp to min 1
+  if (opts.brushSize !== undefined) {
+    if (typeof opts.brushSize !== 'number' || isNaN(opts.brushSize)) {
+      console.warn('[ScratchCard] "brushSize" must be a number. Using default (28).');
+      opts.brushSize = DEFAULTS.brushSize;
+    } else if (opts.brushSize < 1) {
+      console.warn(`[ScratchCard] "brushSize" (${opts.brushSize}) is below 1. Clamping to 1.`);
+      opts.brushSize = 1;
+    }
+  }
+
+  // coinSize: clamp to min 1
+  if (opts.coinSize !== undefined) {
+    if (typeof opts.coinSize !== 'number' || isNaN(opts.coinSize)) {
+      console.warn('[ScratchCard] "coinSize" must be a number. Using default (56).');
+      opts.coinSize = DEFAULTS.coinSize;
+    } else if (opts.coinSize < 1) {
+      console.warn(`[ScratchCard] "coinSize" (${opts.coinSize}) is below 1. Clamping to 1.`);
+      opts.coinSize = 1;
+    }
+  }
+
+  // confettiCount: clamp to min 0
+  if (opts.confettiCount !== undefined) {
+    if (typeof opts.confettiCount !== 'number' || isNaN(opts.confettiCount)) {
+      console.warn('[ScratchCard] "confettiCount" must be a number. Using default (100).');
+      opts.confettiCount = DEFAULTS.confettiCount;
+    } else if (opts.confettiCount < 0) {
+      console.warn(`[ScratchCard] "confettiCount" (${opts.confettiCount}) is negative. Clamping to 0.`);
+      opts.confettiCount = 0;
+    }
+  }
+
+  // confettiDuration: clamp to min 100
+  if (opts.confettiDuration !== undefined) {
+    if (typeof opts.confettiDuration !== 'number' || isNaN(opts.confettiDuration)) {
+      console.warn('[ScratchCard] "confettiDuration" must be a number. Using default (5500).');
+      opts.confettiDuration = DEFAULTS.confettiDuration;
+    } else if (opts.confettiDuration <= 0) {
+      console.warn(`[ScratchCard] "confettiDuration" (${opts.confettiDuration}) must be positive. Clamping to 100.`);
+      opts.confettiDuration = 100;
+    }
+  }
+
+  // animationDuration: clamp to min 100
+  if (opts.animationDuration !== undefined) {
+    if (typeof opts.animationDuration !== 'number' || isNaN(opts.animationDuration)) {
+      console.warn('[ScratchCard] "animationDuration" must be a number. Using default (600).');
+      opts.animationDuration = DEFAULTS.animationDuration;
+    } else if (opts.animationDuration <= 0) {
+      console.warn(`[ScratchCard] "animationDuration" (${opts.animationDuration}) must be positive. Clamping to 100.`);
+      opts.animationDuration = 100;
+    }
+  }
+
+  // animationType: fallback to 'default'
+  if (opts.animationType !== undefined && !['default', 'bounce', 'none'].includes(opts.animationType)) {
+    console.warn(`[ScratchCard] "animationType" ("${opts.animationType}") is invalid. Must be "default", "bounce", or "none". Using "default".`);
+    opts.animationType = 'default';
+  }
+
+  // cardBorderRadius: clamp to min 0
+  if (opts.cardBorderRadius !== undefined) {
+    if (typeof opts.cardBorderRadius !== 'number' || isNaN(opts.cardBorderRadius)) {
+      console.warn('[ScratchCard] "cardBorderRadius" must be a number. Using default (24).');
+      opts.cardBorderRadius = DEFAULTS.cardBorderRadius;
+    } else if (opts.cardBorderRadius < 0) {
+      console.warn(`[ScratchCard] "cardBorderRadius" (${opts.cardBorderRadius}) is negative. Clamping to 0.`);
+      opts.cardBorderRadius = 0;
+    }
+  }
+
+  // scratchZoneBorderRadius: clamp to min 0
+  if (opts.scratchZoneBorderRadius !== undefined) {
+    if (typeof opts.scratchZoneBorderRadius !== 'number' || isNaN(opts.scratchZoneBorderRadius)) {
+      console.warn('[ScratchCard] "scratchZoneBorderRadius" must be a number. Using default (20).');
+      opts.scratchZoneBorderRadius = DEFAULTS.scratchZoneBorderRadius;
+    } else if (opts.scratchZoneBorderRadius < 0) {
+      console.warn(`[ScratchCard] "scratchZoneBorderRadius" (${opts.scratchZoneBorderRadius}) is negative. Clamping to 0.`);
+      opts.scratchZoneBorderRadius = 0;
+    }
+  }
+
+  // scratchLayerSparkleCount: clamp to min 0
+  if (opts.scratchLayerSparkleCount !== undefined) {
+    if (typeof opts.scratchLayerSparkleCount !== 'number' || isNaN(opts.scratchLayerSparkleCount)) {
+      console.warn('[ScratchCard] "scratchLayerSparkleCount" must be a number. Using default (40).');
+      opts.scratchLayerSparkleCount = DEFAULTS.scratchLayerSparkleCount;
+    } else if (opts.scratchLayerSparkleCount < 0) {
+      console.warn(`[ScratchCard] "scratchLayerSparkleCount" (${opts.scratchLayerSparkleCount}) is negative. Clamping to 0.`);
+      opts.scratchLayerSparkleCount = 0;
+    }
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  SSR guard                                                          */
+/* ------------------------------------------------------------------ */
+
+const _isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+/** @returns {boolean} Whether the user prefers reduced motion */
+function _prefersReducedMotion() {
+  return _isBrowser && window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+}
+
+/* ------------------------------------------------------------------ */
+/*  CSS injection (once per page)                                      */
+/* ------------------------------------------------------------------ */
+
+let _injectedThemeKey = null;
+function injectCSS(options) {
+  if (!_isBrowser) return;
+  const theme = {
+    ...DEFAULTS.theme,
+    ...(options.theme || {})
+  };
+
+  // Build a key from all style-affecting options
+  const styleConfig = {
+    theme,
+    headerTitleColor: options.headerTitleColor,
+    instructionColor: options.instructionColor,
+    coinGradientStart: options.coinGradientStart,
+    coinGradientEnd: options.coinGradientEnd,
+    cardBackground: options.cardBackground,
+    cardShadow: options.cardShadow,
+    cardBorderRadius: options.cardBorderRadius,
+    scratchZoneBackground: options.scratchZoneBackground,
+    scratchZoneShadow: options.scratchZoneShadow,
+    scratchZoneBorderRadius: options.scratchZoneBorderRadius,
+    prizeTextColor: options.prizeTextColor,
+    prizeNameColor: options.prizeNameColor,
+    prizeIconBackground: options.prizeIconBackground,
+    giftIconBackground: options.giftIconBackground,
+    modalTitleColor: options.modalTitleColor,
+    modalButtonColor: options.modalButtonColor,
+    modalButtonTextColor: options.modalButtonTextColor,
+    modalBackdropBlur: options.modalBackdropBlur,
+    animationType: options.animationType,
+    animationDuration: options.animationDuration
+  };
+  const key = JSON.stringify(styleConfig);
+  if (_injectedThemeKey === key) return;
+
+  // Remove old stylesheet if exists (SSR-safe)
+  const existing = _isBrowser ? document.querySelector('style[data-scratch-card-sdk]') : null;
+  if (existing) existing.remove();
+  _injectedThemeKey = key;
+  const style = document.createElement('style');
+  style.setAttribute('data-scratch-card-sdk', '');
+  style.textContent = buildScratchCSS(styleConfig, hexToRGBA);
+  document.head.appendChild(style);
+}
+
+/* ------------------------------------------------------------------ */
+/*  ScratchCard class                                                  */
+/* ------------------------------------------------------------------ */
+
+class ScratchCardInstance {
+  /**
+   * @param {ScratchCardOptions} opts
+   */
+  constructor(opts) {
+    if (!_isBrowser) {
+      throw new Error('[ScratchCard] ScratchCard requires a browser environment (window + document).');
+    }
+
+    // ── validate options ──
+    _validateOptions(opts);
+
+    /** @type {ScratchCardOptions} */
+    this.options = deepMerge({}, DEFAULTS, opts);
+
+    // Ensure theme is properly merged
+    this.options.theme = {
+      ...DEFAULTS.theme,
+      ...(opts.theme || {})
+    };
+
+    /** Current scratch percentage (0-100) */
+    this.scratchPercent = 0;
+
+    /** Whether user is currently scratching */
+    this.isScratching = false;
+
+    /** Whether user is dragging the coin */
+    this.isDraggingCoin = false;
+
+    /** Whether prize has been revealed */
+    this.hasRevealed = false;
+
+    /** Set to true after .destroy() */
+    this._destroyed = false;
+
+    /** Whether onScratchStart has fired for this session */
+    this._scratchStartFired = false;
+
+    /** Active confetti requestAnimationFrame ID */
+    this._confettiRafId = null;
+
+    /** Confetti timeout IDs for burst effects */
+    this._confettiTimeouts = [];
+
+    /** @type {object|null} */
+    this._prize = this.options.prize;
+
+    // ── resolve container ──
+    this.containerEl = typeof this.options.container === 'string' ? document.querySelector(this.options.container) : this.options.container;
+    if (!this.containerEl) {
+      throw new Error('[ScratchCard] container not found. Ensure the container element exists in the DOM.');
+    }
+
+    /** Canvas dimensions */
+    this.zoneW = 0;
+    this.zoneH = 0;
+
+    /** Last mouse/touch point for continuous scratching */
+    this._lastPoint = null;
+
+    /** Resize observer for responsive canvas */
+    this._resizeObserver = null;
+
+    // ── inject CSS (idempotent) ──
+    injectCSS(this.options);
+
+    // ── DOM refs (set in _build) ──
+    /** @type {HTMLElement} */
+    this._rootEl = null;
+    /** @type {HTMLElement} */
+    this._zoneEl = null;
+    /** @type {HTMLCanvasElement} */
+    this._canvasEl = null;
+    /** @type {CanvasRenderingContext2D} */
+    this._ctx = null;
+    /** @type {HTMLElement} */
+    this._coinEl = null;
+    /** @type {HTMLElement} */
+    this._giftIconEl = null;
+    /** @type {HTMLElement} */
+    this._modalEl = null;
+    /** @type {HTMLElement} */
+    this._confettiCanvasEl = null;
+    /** @type {HTMLElement} */
+    this._prizeContentEl = null;
+    /** @type {HTMLElement} */
+    this._instructionEl = null;
+
+    // ── build & bind ──
+    this._build();
+    this._bind();
+  }
+
+  /* ================================================================ */
+  /*  DOM construction                                                 */
+  /* ================================================================ */
+
+  /** Build the full widget DOM tree and attach it to the container. */
+  _build() {
+    const o = this.options;
+
+    // ── root wrapper ──
+    const root = document.createElement('div');
+    root.className = 'sc-root';
+
+    // ── page background glow ──
+    const pageBg = document.createElement('div');
+    pageBg.className = 'sc-page-bg';
+    pageBg.setAttribute('aria-hidden', 'true');
+    root.appendChild(pageBg);
+
+    // ── main wrapper ──
+    const wrapper = document.createElement('div');
+    wrapper.className = 'sc-wrapper';
+
+    // ── main card ──
+    const card = document.createElement('div');
+    card.className = 'sc-main-card';
+
+    // ── header ──
+    const header = document.createElement('header');
+    header.className = 'sc-header';
+    header.innerHTML = `<h1>${escapeHtml(o.headerTitle)}</h1>`;
+    card.appendChild(header);
+
+    // ── scratch zone ──
+    const zone = document.createElement('div');
+    zone.className = 'sc-zone';
+    zone.id = `sc-zone-${this._id()}`;
+    this._zoneEl = zone;
+
+    // Prize content (under canvas)
+    const prizeContent = document.createElement('div');
+    prizeContent.className = 'sc-prize-content';
+    prizeContent.innerHTML = `
+      <div class="sc-prize-text">${escapeHtml(this._prize.label || 'Congratulations!')}</div>
+      <div class="sc-prize-name">${escapeHtml(this._prize.name)}</div>
+      <div class="sc-prize-icon">${escapeHtml(this._prize.icon || '🎁')}</div>
+    `;
+    zone.appendChild(prizeContent);
+    this._prizeContentEl = prizeContent;
+
+    // Canvas for scratching
+    const canvas = document.createElement('canvas');
+    canvas.className = 'sc-canvas';
+    canvas.id = `sc-canvas-${this._id()}`;
+    canvas.setAttribute('aria-label', 'Scratch to reveal your prize');
+    zone.appendChild(canvas);
+    this._canvasEl = canvas;
+    this._ctx = canvas.getContext('2d');
+
+    // Gift icon visible above scratch layer (hint icon)
+    if (o.showGiftIcon !== false) {
+      const prizeIconVisible = document.createElement('div');
+      prizeIconVisible.className = 'sc-prize-icon-visible';
+      prizeIconVisible.id = `sc-gift-icon-${this._id()}`;
+      prizeIconVisible.setAttribute('aria-hidden', 'true');
+      prizeIconVisible.textContent = o.giftIcon || '🎁';
+      zone.appendChild(prizeIconVisible);
+      this._giftIconEl = prizeIconVisible;
+    }
+
+    // Draggable coin eraser
+    if (o.showCoin) {
+      const coin = document.createElement('div');
+      coin.className = 'sc-coin';
+      coin.id = `sc-coin-${this._id()}`;
+      coin.setAttribute('aria-hidden', 'true');
+      coin.textContent = o.coinIcon;
+      zone.appendChild(coin);
+      this._coinEl = coin;
+    }
+    card.appendChild(zone);
+
+    // ── instruction ──
+    const instruction = document.createElement('p');
+    instruction.className = 'sc-instruction';
+    instruction.textContent = o.instruction;
+    card.appendChild(instruction);
+    this._instructionEl = instruction;
+    wrapper.appendChild(card);
+    root.appendChild(wrapper);
+    this.containerEl.appendChild(root);
+    this._rootEl = root;
+
+    // ── modal ──
+    if (o.showModal) {
+      this._buildModal();
+    }
+
+    // ── initialize canvas size ──
+    this._initCanvas();
+  }
+
+  /** Generate a unique ID for this instance */
+  _id() {
+    return Math.random().toString(36).slice(2, 9);
+  }
+
+  /** Build the win modal and append it to the container */
+  _buildModal() {
+    const o = this.options;
+    const modalTitle = o.modalTitle || 'Congratulations!';
+    const modalButtonText = o.modalButtonText || 'Claim your';
+    const overlay = document.createElement('div');
+    overlay.className = 'sc-modal-overlay';
+    overlay.setAttribute('role', 'dialog');
+    overlay.setAttribute('aria-modal', 'true');
+    overlay.setAttribute('aria-hidden', 'true');
+    overlay.setAttribute('aria-label', 'Prize won');
+
+    // Confetti canvas
+    const confettiCanvas = document.createElement('canvas');
+    confettiCanvas.className = 'sc-confetti-canvas';
+    confettiCanvas.setAttribute('aria-hidden', 'true');
+    overlay.appendChild(confettiCanvas);
+    this._confettiCanvasEl = confettiCanvas;
+
+    // Background glow
+    const bgGlow = document.createElement('div');
+    bgGlow.className = 'sc-modal-bg-glow';
+    overlay.appendChild(bgGlow);
+
+    // Modal card
+    const modalCard = document.createElement('div');
+    modalCard.className = 'sc-modal-card';
+    modalCard.innerHTML = `
+      <div class="sc-modal-header">
+        <h2>${escapeHtml(modalTitle)} You won ${escapeHtml(this._prize.name)}.</h2>
+      </div>
+      <div class="sc-modal-prize-box">
+        <div class="sc-modal-prize-circle">${escapeHtml(this._prize.icon || '🎁')}</div>
+        <div class="sc-prize-label">${escapeHtml(this._prize.label || modalTitle)} You won ${escapeHtml(this._prize.name)}!</div>
+        <div class="sc-prize-name">${escapeHtml(this._prize.name)}</div>
+      </div>
+      <button type="button" class="sc-btn-claim">${escapeHtml(modalButtonText)} ${escapeHtml(this._prize.name)}</button>
+      <p class="sc-modal-terms">
+        <a href="#" onclick="return false;">Terms & Conditions</a>
+      </p>
+    `;
+    overlay.appendChild(modalCard);
+    this.containerEl.appendChild(overlay);
+    this._modalEl = overlay;
+  }
+
+  /** Initialize canvas size and draw scratch surface */
+  _initCanvas() {
+    const setSize = () => {
+      const w = this._zoneEl.clientWidth;
+      const h = this._zoneEl.clientHeight;
+      if (w <= 0 || h <= 0) return;
+      this.zoneW = w;
+      this.zoneH = h;
+      const dpr = window.devicePixelRatio || 1;
+      this._canvasEl.width = Math.ceil(w * dpr);
+      this._canvasEl.height = Math.ceil(h * dpr);
+      this._canvasEl.style.width = w + 'px';
+      this._canvasEl.style.height = h + 'px';
+      this._ctx.setTransform(1, 0, 0, 1, 0, 0);
+      this._ctx.scale(dpr, dpr);
+      this._drawSurface();
+      this._positionCoinInitial();
+      this._zoneEl.classList.add('sc-ready');
+    };
+
+    // Use ResizeObserver for responsive sizing
+    this._resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(setSize);
+    });
+    this._resizeObserver.observe(this._zoneEl);
+
+    // Initial sizing
+    requestAnimationFrame(() => requestAnimationFrame(setSize));
+  }
+
+  /** Draw the scratchable surface on canvas */
+  _drawSurface() {
+    const w = this.zoneW;
+    const h = this.zoneH;
+    if (w <= 0 || h <= 0) return;
+    const ctx = this._ctx;
+    const o = this.options;
+
+    // Base color for scratch layer (configurable)
+    ctx.fillStyle = o.scratchLayerColor || 'rgb(150, 130, 180)';
+    ctx.fillRect(0, 0, w, h);
+
+    // Add sparkle effect if enabled
+    if (o.scratchLayerSparkles !== false) {
+      const sparkleCount = o.scratchLayerSparkleCount || 40;
+      ctx.globalCompositeOperation = 'overlay';
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
+      for (let i = 0; i < sparkleCount; i++) {
+        ctx.beginPath();
+        ctx.arc(Math.random() * w, Math.random() * h, 2 + Math.random() * 3, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.globalCompositeOperation = 'source-over';
+    }
+  }
+
+  /** Position coin at initial location */
+  _positionCoinInitial() {
+    if (!this._coinEl || this.zoneW <= 0 || this.zoneH <= 0) return;
+    const coinRadius = this.options.coinSize / 2;
+    const x = Math.round(this.zoneW * 0.15 - coinRadius);
+    const y = Math.round(this.zoneH * 0.82 - coinRadius);
+    this._coinEl.style.transform = `translate(${x}px, ${y}px)`;
+  }
+
+  /* ================================================================ */
+  /*  Event binding                                                    */
+  /* ================================================================ */
+
+  /** Wire up all interactive event listeners with proper references for cleanup. */
+  _bind() {
+    const canvas = this._canvasEl;
+
+    // Canvas scratch events (direct mouse/touch scratching)
+    this._boundStartScratch = this._onStartScratch.bind(this);
+    this._boundMoveScratch = this._onMoveScratch.bind(this);
+    this._boundEndScratch = this._onEndScratch.bind(this);
+    canvas.addEventListener('mousedown', this._boundStartScratch);
+    canvas.addEventListener('mousemove', this._boundMoveScratch);
+    canvas.addEventListener('mouseup', this._boundEndScratch);
+    canvas.addEventListener('mouseleave', this._boundEndScratch);
+    canvas.addEventListener('touchstart', this._boundStartScratch, {
+      passive: false
+    });
+    canvas.addEventListener('touchmove', this._boundMoveScratch, {
+      passive: false
+    });
+    canvas.addEventListener('touchend', this._boundEndScratch);
+    canvas.addEventListener('touchcancel', this._boundEndScratch);
+
+    // Coin drag events
+    if (this._coinEl) {
+      this._boundStartCoinDrag = this._onStartCoinDrag.bind(this);
+      this._coinEl.addEventListener('mousedown', this._boundStartCoinDrag);
+      this._coinEl.addEventListener('touchstart', this._boundStartCoinDrag, {
+        passive: false
+      });
+    }
+
+    // Global drag events for coin – store references for cleanup in destroy()
+    this._boundDocMouseMove = e => {
+      if (this.isDraggingCoin) this._onMoveCoinDrag(e);
+    };
+    this._boundDocMouseUp = this._onEndCoinDrag.bind(this);
+    this._boundDocTouchMove = e => {
+      if (this.isDraggingCoin) {
+        e.preventDefault();
+        this._onMoveCoinDrag(e);
+      }
+    };
+    this._boundDocTouchEnd = this._onEndCoinDrag.bind(this);
+    this._boundDocTouchCancel = this._onEndCoinDrag.bind(this);
+    document.addEventListener('mousemove', this._boundDocMouseMove);
+    document.addEventListener('mouseup', this._boundDocMouseUp);
+    document.addEventListener('touchmove', this._boundDocTouchMove, {
+      passive: false
+    });
+    document.addEventListener('touchend', this._boundDocTouchEnd);
+    document.addEventListener('touchcancel', this._boundDocTouchCancel);
+
+    // Modal events
+    if (this._modalEl) {
+      this._boundModalClick = e => {
+        if (e.target === this._modalEl || e.target.classList.contains('sc-modal-bg-glow')) {
+          this.hideModal();
+        }
+      };
+      this._modalEl.addEventListener('click', this._boundModalClick);
+      const btnClaim = this._modalEl.querySelector('.sc-btn-claim');
+      if (btnClaim) {
+        this._boundClaimClick = () => {
+          this.hideModal();
+          if (typeof this.options.onClaim === 'function') {
+            try {
+              this.options.onClaim(this._prize);
+            } catch (err) {
+              console.error('[ScratchCard] onClaim callback error:', err);
+            }
+          }
+        };
+        this._claimBtnEl = btnClaim;
+        btnClaim.addEventListener('click', this._boundClaimClick);
+      }
+    }
+
+    // Global keyboard: Escape closes modal
+    this._boundDocKeydown = e => {
+      if (e.key === 'Escape' && this._modalEl?.classList.contains('active')) {
+        this.hideModal();
+      }
+    };
+    document.addEventListener('keydown', this._boundDocKeydown);
+  }
+
+  /** Get event point relative to scratch zone */
+  _getEventPoint(e) {
+    if (!this._zoneEl) return {
+      x: 0,
+      y: 0
+    };
+    const rect = this._zoneEl.getBoundingClientRect();
+    if (e.touches && e.touches.length) {
+      return {
+        x: e.touches[0].clientX - rect.left,
+        y: e.touches[0].clientY - rect.top
+      };
+    }
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  }
+
+  /** Start scratching */
+  _onStartScratch(e) {
+    if (this.hasRevealed || this._destroyed) return;
+    e.preventDefault();
+    this.isScratching = true;
+
+    // Hide gift icon as soon as user starts scratching
+    if (this._giftIconEl) {
+      this._giftIconEl.style.display = 'none';
+    }
+    this._lastPoint = this._getEventPoint(e);
+    this._scratch(this._lastPoint.x, this._lastPoint.y);
+    if (!this._scratchStartFired && typeof this.options.onScratchStart === 'function') {
+      this._scratchStartFired = true;
+      try {
+        this.options.onScratchStart();
+      } catch (err) {
+        console.error('[ScratchCard] onScratchStart callback error:', err);
+      }
+    }
+  }
+
+  /** Move scratching */
+  _onMoveScratch(e) {
+    if (!this.isScratching || this.hasRevealed || this._destroyed) return;
+    e.preventDefault();
+    const point = this._getEventPoint(e);
+    const dx = point.x - this._lastPoint.x;
+    const dy = point.y - this._lastPoint.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const steps = Math.max(1, Math.floor(dist / 4));
+    for (let i = 1; i <= steps; i++) {
+      const t = i / steps;
+      const x = this._lastPoint.x + dx * t;
+      const y = this._lastPoint.y + dy * t;
+      this._scratch(x, y);
+    }
+    this._lastPoint = point;
+  }
+
+  /** End scratching */
+  _onEndScratch() {
+    this.isScratching = false;
+    this._lastPoint = null;
+  }
+
+  /** Perform scratch at position */
+  _scratch(x, y, radius) {
+    if (!this._ctx || this._destroyed) return;
+    const r = radius !== undefined ? radius : this.options.brushSize / 2;
+    const ctx = this._ctx;
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.fillStyle = 'rgba(0, 0, 0, 1)';
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.globalCompositeOperation = 'source-over';
+    if (this.hasRevealed) return;
+    this._updateScratchPercent();
+  }
+
+  /** Calculate and update scratch percentage */
+  _updateScratchPercent() {
+    if (!this._ctx || this._destroyed) return;
+    const w = this.zoneW;
+    const h = this.zoneH;
+    if (w <= 0 || h <= 0) return;
+    const dpr = window.devicePixelRatio || 1;
+    const cw = Math.ceil(w * dpr);
+    const ch = Math.ceil(h * dpr);
+    if (cw <= 0 || ch <= 0) return;
+    let imageData;
+    try {
+      imageData = this._ctx.getImageData(0, 0, cw, ch);
+    } catch (_) {
+      return;
+    }
+    const data = imageData.data;
+    let transparent = 0;
+    const step = 8; // Sample every 8th pixel for performance
+
+    for (let i = 0; i < data.length; i += 4 * step) {
+      if (data[i + 3] < 128) transparent++;
+    }
+    const total = cw * ch / step;
+    this.scratchPercent = total > 0 ? Math.round(transparent / total * 100) : 0;
+    if (typeof this.options.onScratchProgress === 'function') {
+      try {
+        this.options.onScratchProgress(this.scratchPercent);
+      } catch (err) {
+        console.error('[ScratchCard] onScratchProgress callback error:', err);
+      }
+    }
+    if (this.scratchPercent >= this.options.revealThreshold) {
+      this._reveal();
+    }
+  }
+
+  /** Reveal the prize */
+  _reveal() {
+    if (this.hasRevealed || this._destroyed) return;
+    this.hasRevealed = true;
+
+    // Clear the canvas to fully reveal
+    if (this._ctx) {
+      try {
+        this._ctx.clearRect(0, 0, this.zoneW, this.zoneH);
+      } catch (_) {/* noop */}
+    }
+
+    // Hide the gift icon that sits above the scratch layer
+    if (this._giftIconEl) {
+      this._giftIconEl.style.display = 'none';
+    }
+
+    // Show modal
+    if (this._modalEl) {
+      this._modalEl.classList.add('active');
+      this._modalEl.setAttribute('aria-hidden', 'false');
+
+      // Start confetti only if enabled and motion is OK
+      if (this.options.confettiEnabled !== false && !_prefersReducedMotion()) {
+        this._startConfetti();
+      }
+
+      // Focus the claim button for keyboard users
+      const claimBtn = this._modalEl.querySelector('.sc-btn-claim');
+      if (claimBtn) {
+        setTimeout(() => claimBtn.focus(), 100);
+      }
+    }
+
+    // A11y: announce to screen readers
+    this._announceToScreenReader(`Prize revealed: ${this._prize?.name || 'your prize'}`);
+    if (typeof this.options.onReveal === 'function') {
+      try {
+        this.options.onReveal(this._prize);
+      } catch (err) {
+        console.error('[ScratchCard] onReveal callback error:', err);
+      }
+    }
+  }
+
+  /* ================================================================ */
+  /*  Coin drag handling                                               */
+  /* ================================================================ */
+
+  _onStartCoinDrag(e) {
+    if (this.hasRevealed || this._destroyed) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDraggingCoin = true;
+    if (this._coinEl) this._coinEl.classList.add('dragging');
+
+    // Hide gift icon as soon as user starts scratching
+    if (this._giftIconEl) {
+      this._giftIconEl.style.display = 'none';
+    }
+    const point = this._getEventPoint(e);
+    const c = this._clampCoinPosition(point.x, point.y);
+    this._updateCoinPosition(c.x, c.y);
+    this._scratch(c.x, c.y, this.options.coinSize / 2);
+    if (!this._scratchStartFired && typeof this.options.onScratchStart === 'function') {
+      this._scratchStartFired = true;
+      try {
+        this.options.onScratchStart();
+      } catch (err) {
+        console.error('[ScratchCard] onScratchStart callback error:', err);
+      }
+    }
+  }
+  _onMoveCoinDrag(e) {
+    if (!this.isDraggingCoin || this.hasRevealed || this._destroyed) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const point = this._getEventPoint(e);
+    const c = this._clampCoinPosition(point.x, point.y);
+    this._updateCoinPosition(c.x, c.y);
+    this._scratch(c.x, c.y, this.options.coinSize / 2);
+  }
+  _onEndCoinDrag() {
+    if (!this.isDraggingCoin) return;
+    this.isDraggingCoin = false;
+    if (this._coinEl) this._coinEl.classList.remove('dragging');
+  }
+  _clampCoinPosition(cx, cy) {
+    const r = this.options.coinSize / 2;
+    return {
+      x: Math.max(r, Math.min(this.zoneW - r, cx)),
+      y: Math.max(r, Math.min(this.zoneH - r, cy))
+    };
+  }
+  _updateCoinPosition(cx, cy) {
+    if (!this._coinEl) return;
+    const r = this.options.coinSize / 2;
+    this._coinEl.style.transform = `translate(${cx - r}px, ${cy - r}px)`;
+  }
+
+  /* ================================================================ */
+  /*  Confetti animation                                               */
+  /* ================================================================ */
+
+  _startConfetti() {
+    if (!this._confettiCanvasEl || !this._modalEl || this._destroyed) return;
+    const o = this.options;
+    const rect = this._modalEl.getBoundingClientRect();
+    const w = rect.width;
+    const h = rect.height;
+    if (w <= 0 || h <= 0) return;
+    this._confettiCanvasEl.width = w;
+    this._confettiCanvasEl.height = h;
+    this._confettiCanvasEl.style.width = w + 'px';
+    this._confettiCanvasEl.style.height = h + 'px';
+    const cctx = this._confettiCanvasEl.getContext('2d');
+    if (!cctx) return;
+    const colors = o.confettiColors || ['#e8c547', '#d4a84b', '#6b4a8a', '#8b6baa', '#c94a6a', '#4ac97a', '#fff', '#ff6b6b'];
+    const particles = [];
+    const centerX = w / 2;
+    const centerY = h / 2;
+    const count = o.confettiCount || 100;
+    for (let i = 0; i < count; i++) {
+      const angle = Math.PI * 2 * i / count + Math.random() * 0.5;
+      const speed = 4 + Math.random() * 10;
+      particles.push({
+        x: centerX,
+        y: centerY,
+        vx: Math.cos(angle) * speed + (Math.random() - 0.5) * 4,
+        vy: Math.sin(angle) * speed - 6 + (Math.random() - 0.5) * 2,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        size: 4 + Math.random() * 8,
+        rotation: Math.random() * Math.PI * 2,
+        rotationSpeed: (Math.random() - 0.5) * 0.3,
+        opacity: 1,
+        birth: 0
+      });
+    }
+
+    // Add burst effects
+    this._confettiTimeouts.push(setTimeout(() => this._addBurst(particles, centerX, centerY, 35, cctx, w, h), 200), setTimeout(() => this._addBurst(particles, centerX, centerY, 30, cctx, w, h), 450));
+    const gravity = 0.22;
+    const friction = 0.99;
+    const startTime = Date.now();
+    const duration = o.confettiDuration || 5500;
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      if (elapsed > duration || this._destroyed) {
+        cctx.clearRect(0, 0, w, h);
+        this._confettiRafId = null;
+        return;
+      }
+      cctx.clearRect(0, 0, w, h);
+      for (let i = 0; i < particles.length; i++) {
+        const p = particles[i];
+        const age = p.birth ? Date.now() - p.birth : elapsed;
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vy += gravity;
+        p.vx *= friction;
+        p.vy *= friction;
+        p.rotation += p.rotationSpeed;
+        const life = 1 - age / (p.birth ? 3200 : duration);
+        p.opacity = Math.max(0, life);
+        if (p.opacity <= 0 || p.y > h + 20) continue;
+        cctx.save();
+        cctx.globalAlpha = p.opacity;
+        cctx.translate(p.x, p.y);
+        cctx.rotate(p.rotation);
+        cctx.fillStyle = p.color;
+        cctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
+        cctx.restore();
+      }
+      this._confettiRafId = requestAnimationFrame(animate);
+    };
+    this._confettiRafId = requestAnimationFrame(animate);
+  }
+  _addBurst(particles, x, y, count, cctx, w, h) {
+    const o = this.options;
+    const colors = o.confettiColors || ['#e8c547', '#d4a84b', '#6b4a8a', '#8b6baa', '#c94a6a', '#4ac97a', '#fff', '#ff6b6b'];
+    for (let i = 0; i < count; i++) {
+      const angle = Math.random() * Math.PI * 2;
+      const speed = 3 + Math.random() * 8;
+      particles.push({
+        x: x + (Math.random() - 0.5) * 120,
+        y: y - 40 + (Math.random() - 0.5) * 20,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed - 4,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        size: 3 + Math.random() * 6,
+        rotation: Math.random() * Math.PI * 2,
+        rotationSpeed: (Math.random() - 0.5) * 0.3,
+        opacity: 1,
+        birth: Date.now()
+      });
+    }
+  }
+
+  /* ================================================================ */
+  /*  Public API                                                       */
+  /* ================================================================ */
+
+  /**
+   * Programmatically reveal the prize.
+   */
+  reveal() {
+    if (this._destroyed) return;
+    this._reveal();
+  }
+
+  /**
+   * Hide the modal overlay.
+   */
+  hideModal() {
+    if (this._destroyed || !this._modalEl) return;
+    this._modalEl.classList.remove('active');
+    this._modalEl.setAttribute('aria-hidden', 'true');
+  }
+
+  /**
+   * Show the modal overlay.
+   */
+  showModal() {
+    if (this._destroyed || !this._modalEl) return;
+    this._modalEl.classList.add('active');
+    this._modalEl.setAttribute('aria-hidden', 'false');
+  }
+
+  /**
+   * Reset the scratch card for replay.
+   */
+  reset() {
+    if (this._destroyed) return;
+    this.hasRevealed = false;
+    this.scratchPercent = 0;
+    this.isScratching = false;
+    this.isDraggingCoin = false;
+    this._lastPoint = null;
+    this._scratchStartFired = false;
+
+    // Redraw canvas
+    this._drawSurface();
+
+    // Reset coin position
+    this._positionCoinInitial();
+
+    // Show the gift icon again
+    if (this._giftIconEl) {
+      this._giftIconEl.style.display = '';
+    }
+
+    // Hide modal
+    this.hideModal();
+
+    // Remove ready class temporarily
+    if (this._zoneEl) {
+      this._zoneEl.classList.remove('sc-ready');
+      requestAnimationFrame(() => {
+        if (this._zoneEl) this._zoneEl.classList.add('sc-ready');
+      });
+    }
+  }
+
+  /**
+   * Update the prize at runtime.
+   * @param {object} prize - New prize object
+   */
+  updatePrize(prize) {
+    if (this._destroyed) return;
+    if (!prize || typeof prize !== 'object') {
+      console.warn('[ScratchCard] updatePrize: prize must be an object. Ignoring.');
+      return;
+    }
+    this._prize = {
+      ...this._prize,
+      ...prize
+    };
+    this.reset();
+    const o = this.options;
+    const modalTitle = o.modalTitle || 'Congratulations!';
+    const modalButtonText = o.modalButtonText || 'Claim your';
+
+    // Update prize display
+    if (this._prizeContentEl) {
+      this._prizeContentEl.innerHTML = `
+        <div class="sc-prize-text">${escapeHtml(this._prize.label || modalTitle)}</div>
+        <div class="sc-prize-name">${escapeHtml(this._prize.name)}</div>
+        <div class="sc-prize-icon">${escapeHtml(this._prize.icon || '🎁')}</div>
+      `;
+    }
+
+    // Update modal content
+    if (this._modalEl) {
+      const header = this._modalEl.querySelector('.sc-modal-header h2');
+      if (header) header.textContent = `${modalTitle} You won ${this._prize.name}.`;
+      const circle = this._modalEl.querySelector('.sc-modal-prize-circle');
+      if (circle) circle.textContent = this._prize.icon || '🎁';
+      const label = this._modalEl.querySelector('.sc-modal-prize-box .sc-prize-label');
+      if (label) label.textContent = `${this._prize.label || modalTitle} You won ${this._prize.name}!`;
+      const name = this._modalEl.querySelector('.sc-modal-prize-box .sc-prize-name');
+      if (name) name.textContent = this._prize.name;
+      const btn = this._modalEl.querySelector('.sc-btn-claim');
+      if (btn) btn.textContent = `${modalButtonText} ${this._prize.name}`;
+    }
+  }
+
+  /**
+   * Update configuration options at runtime.
+   * @param {Partial<ScratchCardOptions>} newOptions
+   */
+  updateOptions(newOptions) {
+    if (this._destroyed) return;
+    if (!newOptions || typeof newOptions !== 'object') {
+      console.warn('[ScratchCard] updateOptions: argument must be an object. Ignoring.');
+      return;
+    }
+
+    // Sanitize numeric/enum values before merging
+    _validateOptions({
+      ...this.options,
+      ...newOptions,
+      container: this.options.container,
+      prize: this.options.prize
+    });
+
+    // Merge new options
+    this.options = deepMerge({}, this.options, newOptions);
+
+    // Handle theme separately for proper nested merge
+    if (newOptions.theme) {
+      this.options.theme = {
+        ...DEFAULTS.theme,
+        ...this.options.theme,
+        ...newOptions.theme
+      };
+    }
+
+    // Re-inject CSS if styling options changed
+    injectCSS(this.options);
+
+    // Update header if changed
+    const header = this._rootEl?.querySelector('.sc-header h1');
+    if (header && newOptions.headerTitle !== undefined) {
+      header.textContent = this.options.headerTitle;
+    }
+
+    // Update instruction if changed
+    if (this._instructionEl && newOptions.instruction !== undefined) {
+      this._instructionEl.textContent = this.options.instruction;
+    }
+
+    // Update coin icon if changed
+    if (this._coinEl && newOptions.coinIcon !== undefined) {
+      this._coinEl.textContent = this.options.coinIcon;
+    }
+
+    // Update gift icon if changed
+    if (this._giftIconEl && newOptions.giftIcon !== undefined) {
+      this._giftIconEl.textContent = this.options.giftIcon;
+    }
+  }
+
+  /**
+   * Announce a message to screen readers via a visually hidden aria-live region.
+   * @param {string} message
+   */
+  _announceToScreenReader(message) {
+    if (!_isBrowser) return;
+    if (!this._liveRegion) {
+      const el = document.createElement('div');
+      el.setAttribute('aria-live', 'assertive');
+      el.setAttribute('aria-atomic', 'true');
+      el.setAttribute('role', 'status');
+      el.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';
+      document.body.appendChild(el);
+      this._liveRegion = el;
+    }
+    this._liveRegion.textContent = '';
+    setTimeout(() => {
+      if (this._liveRegion) this._liveRegion.textContent = message;
+    }, 100);
+  }
+
+  /**
+   * Destroy the instance and clean up DOM/events.
+   */
+  destroy() {
+    if (this._destroyed) return;
+    this._destroyed = true;
+
+    // ── Cancel confetti animation frame ──
+    if (this._confettiRafId) {
+      cancelAnimationFrame(this._confettiRafId);
+      this._confettiRafId = null;
+    }
+
+    // ── Clear confetti burst timeouts ──
+    if (this._confettiTimeouts) {
+      this._confettiTimeouts.forEach(clearTimeout);
+      this._confettiTimeouts = [];
+    }
+
+    // ── Remove canvas event listeners ──
+    if (this._canvasEl) {
+      this._canvasEl.removeEventListener('mousedown', this._boundStartScratch);
+      this._canvasEl.removeEventListener('mousemove', this._boundMoveScratch);
+      this._canvasEl.removeEventListener('mouseup', this._boundEndScratch);
+      this._canvasEl.removeEventListener('mouseleave', this._boundEndScratch);
+      this._canvasEl.removeEventListener('touchstart', this._boundStartScratch);
+      this._canvasEl.removeEventListener('touchmove', this._boundMoveScratch);
+      this._canvasEl.removeEventListener('touchend', this._boundEndScratch);
+      this._canvasEl.removeEventListener('touchcancel', this._boundEndScratch);
+    }
+
+    // ── Remove coin listeners ──
+    if (this._coinEl && this._boundStartCoinDrag) {
+      this._coinEl.removeEventListener('mousedown', this._boundStartCoinDrag);
+      this._coinEl.removeEventListener('touchstart', this._boundStartCoinDrag);
+    }
+
+    // ── Remove global document listeners (prevents memory leak) ──
+    if (this._boundDocMouseMove) {
+      document.removeEventListener('mousemove', this._boundDocMouseMove);
+      document.removeEventListener('mouseup', this._boundDocMouseUp);
+      document.removeEventListener('touchmove', this._boundDocTouchMove);
+      document.removeEventListener('touchend', this._boundDocTouchEnd);
+      document.removeEventListener('touchcancel', this._boundDocTouchCancel);
+    }
+
+    // ── Remove modal event listeners ──
+    if (this._modalEl && this._boundModalClick) {
+      this._modalEl.removeEventListener('click', this._boundModalClick);
+    }
+    if (this._claimBtnEl && this._boundClaimClick) {
+      this._claimBtnEl.removeEventListener('click', this._boundClaimClick);
+    }
+
+    // ── Remove global keyboard listener ──
+    if (this._boundDocKeydown) {
+      document.removeEventListener('keydown', this._boundDocKeydown);
+    }
+
+    // ── Remove live-region ──
+    if (this._liveRegion?.parentNode) {
+      this._liveRegion.parentNode.removeChild(this._liveRegion);
+    }
+
+    // Disconnect resize observer
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+
+    // Remove modal
+    if (this._modalEl && this._modalEl.parentNode) {
+      this._modalEl.parentNode.removeChild(this._modalEl);
+    }
+
+    // Remove root
+    if (this._rootEl && this._rootEl.parentNode) {
+      this._rootEl.parentNode.removeChild(this._rootEl);
+    }
+
+    // Clear all references to prevent memory leaks
+    this._rootEl = null;
+    this._zoneEl = null;
+    this._canvasEl = null;
+    this._ctx = null;
+    this._coinEl = null;
+    this._giftIconEl = null;
+    this._modalEl = null;
+    this._confettiCanvasEl = null;
+    this._prizeContentEl = null;
+    this._instructionEl = null;
+    this._prize = null;
+    this._lastPoint = null;
+    this._liveRegion = null;
+    this._claimBtnEl = null;
+  }
+
+  /** Get the current prize object */
+  get prize() {
+    return this._prize;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Static factory                                                    */
+/* ------------------------------------------------------------------ */
+
+const ScratchCard = {
+  /**
+   * Create and return a new ScratchCardInstance.
+   * @param {ScratchCardOptions} opts
+   * @returns {ScratchCardInstance}
+   */
+  init(opts) {
+    return new ScratchCardInstance(opts);
+  },
+  /** The underlying class – useful for `instanceof` checks or subclassing. */
+  Instance: ScratchCardInstance,
+  /** Current SDK version */
+  VERSION: '0.1.0-alpha.1',
+  /** Export defaults for reference */
+  DEFAULTS: DEFAULTS
+};
+
+/**
+ * ScratchCard React Component (ES6 class-based wrapper)
+ *
+ * @example
+ *   import { ScratchCardReact } from 'spin-wheel-sdk/react';
+ *
+ *   <ScratchCardReact
+ *     ref={cardRef}
+ *     prize={{ name: 'iPhone 16', icon: '📱', label: 'Congratulations!' }}
+ *     onReveal={(prize) => console.log(prize)}
+ *   />
+ */
+
+/**
+ * All supported prop keys for ScratchCardReact component.
+ * Used for copying props to SDK options.
+ */
+const PROP_KEYS = Object.freeze([
+// Core
+'prize',
+// Header UI
+'headerTitle', 'headerTitleColor',
+// Instruction
+'instruction', 'instructionColor',
+// Scratch Behavior
+'revealThreshold', 'brushSize',
+// Coin
+'coinSize', 'showCoin', 'coinIcon', 'coinGradientStart', 'coinGradientEnd',
+// Card Appearance
+'cardBackground', 'cardShadow', 'cardBorderRadius',
+// Scratch Zone
+'scratchZoneBackground', 'scratchZoneShadow', 'scratchZoneBorderRadius',
+// Scratch Layer
+'scratchLayerColor', 'scratchLayerSparkles', 'scratchLayerSparkleCount',
+// Prize Display
+'prizeTextColor', 'prizeNameColor', 'prizeIconBackground',
+// Gift Icon
+'showGiftIcon', 'giftIcon', 'giftIconBackground',
+// Modal
+'showModal', 'modalTitle', 'modalTitleColor', 'modalButtonText', 'modalButtonColor', 'modalButtonTextColor', 'modalBackdropBlur',
+// Confetti
+'confettiEnabled', 'confettiColors', 'confettiCount', 'confettiDuration',
+// Animation
+'animationType', 'animationDuration',
+// Theme
+'theme']);
+
+/**
+ * Creates the ScratchCardReact component using the provided React instance.
+ * This factory pattern avoids bundling React into the SDK.
+ *
+ * @param {typeof import('react')} React – the React module
+ * @returns {{ ScratchCardReact: React.ForwardRefExoticComponent }}
+ */
+function createScratchCardReact(React) {
+  const {
+    useEffect,
+    useRef,
+    useImperativeHandle,
+    forwardRef,
+    createElement
+  } = React;
+  const ScratchCardReact = forwardRef(function ScratchCardReact(props, ref) {
+    const containerRef = useRef(null);
+    const instanceRef = useRef(null);
+
+    // Keep latest callbacks in a ref so they're always fresh
+    const callbacksRef = useRef({});
+    callbacksRef.current.onScratchStart = props.onScratchStart;
+    callbacksRef.current.onScratchProgress = props.onScratchProgress;
+    callbacksRef.current.onReveal = props.onReveal;
+    callbacksRef.current.onClaim = props.onClaim;
+
+    // Mount the SDK once, destroy on unmount (SSR-safe)
+    useEffect(() => {
+      if (!containerRef.current || typeof window === 'undefined') return;
+      const opts = {};
+
+      // Copy only defined props
+      PROP_KEYS.forEach(k => {
+        if (props[k] !== undefined) opts[k] = props[k];
+      });
+      opts.container = containerRef.current;
+
+      // Wrap callbacks so they always point to latest prop
+      opts.onScratchStart = () => callbacksRef.current.onScratchStart?.();
+      opts.onScratchProgress = percent => callbacksRef.current.onScratchProgress?.(percent);
+      opts.onReveal = prize => callbacksRef.current.onReveal?.(prize);
+      opts.onClaim = prize => callbacksRef.current.onClaim?.(prize);
+      try {
+        instanceRef.current = ScratchCard.init(opts);
+      } catch (err) {
+        console.error('[ScratchCardReact] Failed to initialize ScratchCard:', err);
+      }
+      return () => {
+        try {
+          instanceRef.current?.destroy();
+        } catch (_) {/* noop */}
+        instanceRef.current = null;
+      };
+    }, []); // mount-only
+
+    // Live-update prize when the prop changes
+    useEffect(() => {
+      if (instanceRef.current && props.prize) {
+        try {
+          instanceRef.current.updatePrize(props.prize);
+        } catch (_) {/* ignore on first mount */}
+      }
+    }, [props.prize]);
+
+    // Expose imperative handle
+    useImperativeHandle(ref, () => ({
+      /** Programmatically reveal the prize */
+      reveal() {
+        instanceRef.current?.reveal();
+      },
+      /** Hide the modal */
+      hideModal() {
+        instanceRef.current?.hideModal();
+      },
+      /** Show the modal */
+      showModal() {
+        instanceRef.current?.showModal();
+      },
+      /** Reset the scratch card */
+      reset() {
+        instanceRef.current?.reset();
+      },
+      /** Update prize at runtime */
+      updatePrize(prize) {
+        instanceRef.current?.updatePrize(prize);
+      },
+      /** Update options at runtime */
+      updateOptions(opts) {
+        instanceRef.current?.updateOptions(opts);
+      },
+      /** Get the current scratch percentage */
+      get scratchPercent() {
+        return instanceRef.current?.scratchPercent;
+      },
+      /** Get whether the prize has been revealed */
+      get hasRevealed() {
+        return instanceRef.current?.hasRevealed;
+      },
+      /** Get the current prize */
+      get prize() {
+        return instanceRef.current?.prize;
+      },
+      /** Access the raw ScratchCardInstance */
+      get instance() {
+        return instanceRef.current;
+      }
+    }), []);
+    return createElement('div', {
+      ref: containerRef,
+      className: props.className || '',
+      style: props.style || {}
+    });
+  });
+  ScratchCardReact.displayName = 'ScratchCardReact';
+  return ScratchCardReact;
+}
+if (typeof window !== 'undefined' && window.React) {
+  createScratchCardReact(window.React);
+}
+
+/**
+ * React entrypoint for bundlers.
+ *
+ * This subpath is meant to be imported as:
+ *   import { SpinWheelReact, ScratchCardReact } from '@zencemarketing/spin-scratch-sdk/react'
+ *
+ * It wires the factory wrappers to your app's React (peer dependency).
+ */
+
+const SpinWheelReact = createSpinWheelReact(React);
+const ScratchCardReact = createScratchCardReact(React);
+exports.ScratchCard = ScratchCard;
+exports.ScratchCardInstance = ScratchCardInstance;
+exports.ScratchCardReact = ScratchCardReact;
+exports.SpinWheel = SpinWheel;
+exports.SpinWheelInstance = SpinWheelInstance;
+exports.SpinWheelReact = SpinWheelReact;
+exports.createScratchCardReact = createScratchCardReact;
+exports.createSpinWheelReact = createSpinWheelReact;
+//# sourceMappingURL=react.cjs.js.map