:root {
  /* ---------------------------------------------------------------------------
     COLORS
     --------------------------------------------------------------------------- */

  /* Backgrounds */
  --color-background-primary: #0e6b4f;        /* form gradient top — deep green */
  --color-background-secondary: #084231;      /* form gradient bottom — darker green */
  --color-background-surface: #ffffff;        /* input field fill */

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-dark: #0A1A3F; 
  --color-sub-text: #A8B4D0;           /* CTA button label — dark navy */
  --color-text-muted: #848484;                /* input placeholder */

  /* Accents */
  --color-accent-primary: #d4af37;            /* gold — borders, gradient endpoints */
  --color-accent-secondary: #f5e6a8;          /* light gold — gradient midpoint */

  /* Borders */
  --color-border-default: #d4af37;            /* form + input border */
  --color-border-focus: rgba(212, 175, 55, 0.13); /* soft gold ring around input */

  /* Gradient endpoints (raw) */
  --gradient-gold-start: #d4af37;
  --gradient-gold-mid: #f5e6a8;
  --gradient-gold-end: #d4af37;

  /* Gradient compositions */
  --gradient-cta-button: linear-gradient(
    123.731deg,
    var(--gradient-gold-start) 0%,
    var(--gradient-gold-mid) 50%,
    var(--gradient-gold-end) 100%
  );
  --gradient-cta-title: linear-gradient(
    131.018deg,
    var(--gradient-gold-start) 0%,
    var(--gradient-gold-mid) 50%,
    var(--gradient-gold-end) 100%
  );
  --gradient-cta-label: linear-gradient(
    144.75deg,
    var(--gradient-gold-start) 0%,
    var(--gradient-gold-mid) 50%,
    var(--gradient-gold-end) 100%
  );
  --gradient-cta-footer: linear-gradient(
    159.033deg,
    var(--gradient-gold-start) 0%,
    var(--gradient-gold-mid) 50%,
    var(--gradient-gold-end) 100%
  );
  --gradient-surface-form: linear-gradient(
    to bottom,
    var(--color-background-primary),
    var(--color-background-secondary)
  );

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------------- */

  /* Font families */
  --font-poppins: "Poppins", "Noto Sans Bengali", sans-serif;
  --font-playfair-display: "Playfair Display", serif;

  /* Font sizes (1rem = 16px) */
  --font-size-sm: 0.875rem;   /* 14px — input placeholder */
  --font-size-md: 1rem;     /* 16px — body, button, label, footer, input */
  --font-size-xl: 4rem;     /* 64px — Bengali sub-title */
  --font-size-2xl: 6rem;    /* 96px — English display title */

  /* Font weights */
  --font-weight-medium: 400;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.125;   /* 72/64 — display titles */
  --line-height-normal: 1.5;    /* 24/16 — body & label */

  /* Letter spacing */
  --letter-spacing-tight: 0.0125rem;  /* 0.2px — titles & button */
  --letter-spacing-normal: 0.025rem;  /* 0.4px — footer */
  --letter-spacing-wide: 0.125rem;    /* 2px — input code text */

  /* ---------------------------------------------------------------------------
     SPACING
     --------------------------------------------------------------------------- */
  --space-3: 0.75rem;   /* 12px — gap between Bengali & English title */
  --space-4: 1rem;      /* 16px — button vertical padding */
  --space-6: 1.5rem;    /* 24px — form internal gap, button horizontal padding */
  --space-8: 2rem;      /* 32px — form vertical padding, frame top padding */
  --space-16: 4rem;     /* 64px — gap between logo, title, and form */

  /* ---------------------------------------------------------------------------
     RADIUS
     --------------------------------------------------------------------------- */
  --radius-md: 0.875rem;   /* 14px — input field */
  --radius-lg: 1.5rem;     /* 24px — form container */
  --radius-full: 9999px;   /* button — pill */

  /* ---------------------------------------------------------------------------
     SHADOWS
     --------------------------------------------------------------------------- */
  --shadow-cta: 0 0.375rem 1.375rem 0 rgba(212, 175, 55, 0.25);
  --shadow-cta-highlight: inset 0 1px 0 0 #f5e6a8;
  --shadow-modal: 0.25rem -0.1875rem 1.446875rem rgba(212, 175, 55, 0.6);
  --shadow-card: inset 0 1px 0 0 rgba(212, 175, 55, 0.13);
  --shadow-input-ring: 0 0 0 0.25rem rgba(212, 175, 55, 0.13);

  /* Backdrop overlay (modals) */
  --color-backdrop-overlay: rgba(5, 7, 16, 0.8);

  /* ---------------------------------------------------------------------------
     INTERACTION — reusable hover/press effect tokens
     --------------------------------------------------------------------------- */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 220ms;
  --motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);

  --motion-lift-hover: -0.125rem;       /* -2px — translateY on hover */
  --motion-lift-press: 0.0625rem;       /*  1px — translateY on press */

  /* CTA interaction shadows (gold-tinted halo grows on hover, collapses on press) */
  --shadow-cta-hover:
    0 0.75rem 2rem 0 rgba(212, 175, 55, 0.45),
    0 0 0 0.0625rem rgba(245, 230, 168, 0.35);
  --shadow-cta-press:
    0 0.125rem 0.5rem 0 rgba(212, 175, 55, 0.18);
}

/* =============================================================================
   Reference theme — same tokens with Figma source annotations
   for sanity checking against the design.
   ============================================================================= */

:root[data-theme="reference"] {
  /* COLORS ------------------------------------------------------------------ */
  --color-background-primary: #0e6b4f;        /* form container — gradient top    (node 135:1639) */
  --color-background-secondary: #084231;      /* form container — gradient bottom (node 135:1639) */
  --color-background-surface: #ffffff;        /* input field background            (node 135:1642) */

  --color-text-primary: #0a1a3f;              /* "Confirm" button label            (node 135:1644) */
  --color-text-muted: #848484;                /* placeholder "WMT-5XKQ29"          (node I135:1642;116:45) */

  --color-accent-primary: #d4af37;            /* gold — borders & gradient endpoints */
  --color-accent-secondary: #f5e6a8;          /* light gold — gradient midpoint & button inner highlight */

  --color-border-default: #d4af37;            /* 1.5px border on form (135:1639) + 1px border on input (135:1642) */
  --color-border-focus: rgba(212, 175, 55, 0.13); /* 4px gold ring on input (135:1642) */
  --color-backdrop-overlay: rgba(5, 7, 16, 0.8); /* Wrong-code modal backdrop (node 117:12) */

  /* GRADIENTS --------------------------------------------------------------- */
  --gradient-cta-button:                       /* "Confirm" button fill (135:1643) */
    linear-gradient(123.731deg, #d4af37 0%, #f5e6a8 50%, #d4af37 100%);
  --gradient-cta-title:                        /* "ঈদ-উল-আযহা" & "Lucky Spin 2026" text (135:1636 / 135:1637) */
    linear-gradient(131.018deg, #d4af37 0%, #f5e6a8 50%, #d4af37 100%);
  --gradient-cta-label:                        /* "আপনার Lucky code প্রবেশ করুন" label (135:1641) */
    linear-gradient(144.75deg, #d4af37 0%, #f5e6a8 50%, #d4af37 100%);
  --gradient-cta-footer:                       /* footer "WeMasterTrade · ..." (135:1645) */
    linear-gradient(159.033deg, #d4af37 0%, #f5e6a8 50%, #d4af37 100%);
  --gradient-surface-form:                     /* form container fill (135:1639) */
    linear-gradient(to bottom, #0e6b4f, #084231);

  /* TYPOGRAPHY -------------------------------------------------------------- */
  --font-poppins: "Poppins", "Noto Sans Bengali", sans-serif;
                                              /* used on: Bengali title, label, input, button, footer */
  --font-playfair-display: "Playfair Display", serif;
                                              /* used on: "Lucky Spin 2026" display title (135:1637) */

  --font-size-md: 1rem;                       /* 16px — label, input, button, footer (135:1641, 1642, 1644, 1645) */
  --font-size-xl: 4rem;                       /* 64px — "ঈদ-উল-আযহা" (135:1636) */
  --font-size-2xl: 6rem;                      /* 96px — "Lucky Spin 2026" (135:1637) */

  --font-weight-medium: 500;                  /* label, input, footer */
  --font-weight-bold: 700;                    /* both titles, button */

  --line-height-tight: 1.125;                 /* 72px line-height on display titles (135:1636 / 135:1637) */
  --line-height-normal: 1.5;                  /* 24px line-height on label (135:1641) */

  --letter-spacing-tight: 0.0125rem;          /* 0.2px — title block (135:1635), button label (135:1644) */
  --letter-spacing-normal: 0.025rem;          /* 0.4px — footer (135:1645) */
  --letter-spacing-wide: 0.125rem;            /* 2px — input code "WMT-5XKQ29" */

  /* SPACING ----------------------------------------------------------------- */
  --space-3: 0.75rem;                         /* 12px — gap inside Event Title block (135:1635) */
  --space-4: 1rem;                            /* 16px — button pt (135:1643) */
  --space-6: 1.5rem;                          /* 24px — Form Container gap (135:1640) + button px */
  --space-8: 2rem;                            /* 32px — Input form py (135:1639) + frame pt */
  --space-16: 4rem;                           /* 64px — Main Container gap (135:1632) */

  /* RADIUS ------------------------------------------------------------------ */
  --radius-md: 0.875rem;                      /* 14px — input field (135:1642) */
  --radius-lg: 1.5rem;                        /* 24px — form container (135:1639) */
  --radius-full: 9999px;                      /* 999px pill — button (135:1643) */

  /* SHADOWS ----------------------------------------------------------------- */
  --shadow-cta:                                /* button outer glow (135:1643) */
    0 0.375rem 1.375rem 0 rgba(212, 175, 55, 0.25);
  --shadow-cta-highlight:                      /* button top inner highlight (135:1643) */
    inset 0 1px 0 0 #f5e6a8;
  --shadow-modal:                              /* form drop-shadow (135:1639) */
    0.25rem -0.1875rem 1.446875rem rgba(212, 175, 55, 0.6);
  --shadow-card:                               /* form top inner highlight (135:1639) */
    inset 0 1px 0 0 rgba(212, 175, 55, 0.13);
  --shadow-input-ring:                         /* soft gold ring around input (135:1642) */
    0 0 0 0.25rem rgba(212, 175, 55, 0.13);
}

/* =============================================================================
   Reset
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

/* =============================================================================
   Base
   ============================================================================= */

body {
  background: var(--gradient-surface-form);
  color: var(--color-text-primary);
  font-family: var(--font-poppins);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   Utilities
   ============================================================================= */

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

.is-hidden {
  display: none !important;
}

/* =============================================================================
   Effects — reusable interaction primitives
   ============================================================================= */

/* .fx-pressable
   Reusable lift-on-hover + sink-on-press behavior. Apply to any interactive
   element (buttons, cards, link tiles). Color-specific shadow swaps still live
   on the variant (e.g. .btn--primary). Respects prefers-reduced-motion. */
.fx-pressable {
  transform: translateY(0);
  transition:
    transform var(--motion-duration-base) var(--motion-easing-out),
    box-shadow var(--motion-duration-base) var(--motion-easing-out),
    filter var(--motion-duration-base) var(--motion-easing-out);
  will-change: transform, box-shadow;
}

.fx-pressable:hover {
  transform: translateY(var(--motion-lift-hover));
}

.fx-pressable:active {
  transform: translateY(var(--motion-lift-press));
  transition-duration: var(--motion-duration-fast);
}

@media (prefers-reduced-motion: reduce) {
  .fx-pressable,
  .fx-pressable:hover,
  .fx-pressable:active {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Screen: Code Entry
   ============================================================ */

#app {
  width: 100%;
  min-height: 100vh;
  display: flex;
}

.screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-direction: column;
}

.screen--code-entry {
  background-image: url("/wp-content/themes/spin/assets/images/bg-img2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.screen__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-4);
}

/* Logo --------------------------------------------------------- */
.logo {
  display: block;
  width: clamp(7.5rem, 22vw, 12.8125rem);
  height: auto;
}

/* Header / event title ---------------------------------------- */
.screen__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.event-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: var(--space-3); */
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);
}

.event-title__sub,
.event-title__main {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  background: var(--gradient-cta-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: var(--line-height-tight);
}

.event-title__sub {
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-bold);
  font-size: clamp(2rem, 7vw, var(--font-size-xl));
}

.event-title__main {
  font-family: var(--font-playfair-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(3rem, 11vw, var(--font-size-2xl));
  line-height: 1.25;
  padding-bottom: 0.08em;
}

/* Form block --------------------------------------------------- */
.form-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.code-form {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-6);
  background: var(--gradient-surface-form);
  border: 1.5px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal), var(--shadow-card);
}

.code-form__label {
  width: 100%;
  text-align: center;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  background: var(--gradient-cta-label);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Input -------------------------------------------------------- */
/* Default state: white field, gold border, no ring, no icon. */
.code-form__input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-background-surface);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  transition: box-shadow 150ms ease;
}

.input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: var(--space-4) 0;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}

.input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Icon: hidden by default, revealed in the filled state. */
.code-form__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-background-primary);
  display: none;
}

/* Press state: keep border/no-ring; native caret handles the cursor. */
.code-form__input-wrap:focus-within {
  box-shadow: none;
}

/* Filled state: input has a value → gold ring + check icon visible. */
.code-form__input-wrap:has(.input:not(:placeholder-shown)) {
  box-shadow: var(--shadow-input-ring);
}

.code-form__input-wrap:has(.input:not(:placeholder-shown)) .code-form__icon {
  display: block;
}

/* Button ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-tight);
  text-align: center;
  border-radius: var(--radius-full);
}

.btn--primary {
  padding: var(--space-4) var(--space-6);
  background: var(--gradient-cta-button);
  color: var(--color-text-dark);
  box-shadow: var(--shadow-cta), var(--shadow-cta-highlight);
}

.btn--primary:hover {
  box-shadow: var(--shadow-cta-hover), var(--shadow-cta-highlight);
  filter: brightness(1.04) saturate(1.08);
}

.btn--primary:active {
  box-shadow: var(--shadow-cta-press), var(--shadow-cta-highlight);
  filter: brightness(0.97);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 3px;
}

/* Footer note -------------------------------------------------- */
.footer-note {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-normal);
  background: var(--gradient-cta-footer);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Breakpoints -------------------------------------------------- */
@media (min-width: 768px) {
  .screen__content {
    gap: var(--space-16);
    padding: var(--space-8) var(--space-6) var(--space-16);
  }

  .screen__header {
    gap: var(--space-16);
  }

  .code-form {
    max-width: 480px;
    padding: var(--space-8) var(--space-8);
  }
}

@media (min-width: 1024px) {
  .code-form {
    max-width: 520px;
    padding: var(--space-8) var(--space-16);
  }
}

@media (min-width: 1280px) {
  .screen__content {
    max-width: 782px;
  }
}

/* ============================================================
   Modal: Wrong Code Popup
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal[hidden] {
  display: none !important;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 22.5rem; /* 360px from Figma (node 116:179) */
  padding: var(--space-6) var(--space-6);
  background: var(--gradient-surface-form);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .modal__card {
    padding: var(--space-8) var(--space-6);
  }
}

/* Close button (top-right corner of card) */
.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; /* 44px hit area */
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-background-surface);
  border-radius: var(--radius-full);
}

.modal__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Status icon (red X in a soft red disc) — Figma node 116:137 */
.modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;  /* 48px outer disc */
  height: 3rem;
  border-radius: var(--radius-full);
  background: rgba(239, 68, 68, 0.3);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: rgb(239, 68, 68);
}

.modal__icon svg {
  width: 1.375rem;  /* 22px inner X */
  height: 1.375rem;
}

/* Heading group (title + subtitle share a tighter gap than the card) */
.modal__heading {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* 6px — Figma title↔subtitle gap (node 116:171) */
}

/* Title */
#wrong-code-title {
  margin: 0;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.25rem, 4vw + 0.25rem, 1.5rem); /* 20→24px */
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

/* Subtitle */
.modal__subtitle {
  margin: 0;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-sub-text);
}

/* Divider */
.modal__divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-text-muted);
  opacity: 0.25;
}

/* Body region */
#wrong-code-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.modal__section-heading {
  margin: 0;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.modal__body-text {
  margin: 0;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-sub-text);
}

.modal__highlight {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
}

/* ============================================================
   Screen: Spin Wheel (Ready State)
   ============================================================ */

.screen--spin-wheel {
  background-image: url("/wp-content/themes/spin/assets/images/bg-img1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Two-column-ready layout container. Mobile = stacked, desktop = side-by-side. */
.spin-wheel {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.spin-wheel__main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.spin-wheel__header {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Compact title variant — same gold gradient, smaller display size for screen 3. */
.event-title--compact .event-title__sub {
  font-size: clamp(1.5rem, 5vw, 2rem); /* 24→32px (Figma desktop: 32px) */
}

.event-title--compact .event-title__main {
  font-size: clamp(1.75rem, 5.5vw, 2.25rem); /* 28→36px (Figma desktop: 36px) */
}

/* ----- Wheel ------------------------------------------------- */
.wheel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.5rem;       /* 280px — mobile starting point */
  height: 17.5rem;
  aspect-ratio: 1 / 1;
}

.wheel__rotor {
  position: absolute;
  /*
    Inner disc occupies ~90.2% of the frame (Figma: 700.84 / 777 = 0.9019).
    Slight vertical offset (-0.6%) approximates Figma's center offset:
    inner center y = 30.81 + 700.84/2 = 381.23 of 777 → -0.94% from center.
  */
  top: 50%;
  left: 50%;
  width: 87%;
  height: 85%;
  transform: translate(-50%, calc(-51%)) rotate(0deg);
  transform-origin: center center;
  transition: transform 0s; /* overridden by .wheel--spinning */
  will-change: transform;
  pointer-events: none;
}

.wheel__rotor.wheel--spinning {
  transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

.wheel__image {
  /* position: absolute;
  top: 35px;
  right: 44px; */
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}

.wheel__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
  z-index: 2;
}

/* ----- Spin button ------------------------------------------- */
.btn--spin {
  width: auto;
  min-width: 12rem;
  padding: var(--space-4) var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.btn--spin .btn__icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* ----- Prize card / list ------------------------------------- */
.spin-wheel__prizes {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  right: 116px;
}

.prize-card {
  position: relative;
  width: 100%;
  max-width: 25.3125rem; /* 405px — Figma node 119:353 */
  padding: var(--space-8) var(--space-6); /* 32/24 — Figma py-38 px-27 (closest tokens) */
  background: var(--gradient-surface-form);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal), var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prize-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.prize-card__star {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

.prize-card__eyebrow {
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  background: var(--gradient-cta-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prize-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prize-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3); /* 12/12 — Figma py-11 px-13 */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(168, 180, 208, 0.16);
  border-radius: var(--radius-md);
}

.prize-list__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(212, 175, 55, 0.12);
  color: var(--color-accent-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  line-height: 1;
}

.prize-list__text {
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm); /* 14px on mobile */
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

/* ----- Responsive breakpoints -------------------------------- */
@media (min-width: 768px) {
  .spin-wheel {
    padding: var(--space-8) var(--space-6);
    gap: var(--space-8);
  }

  /* .spin-wheel__main keeps gap: var(--space-4) at all breakpoints
     to match Figma's gap-16 between title / wheel / button. */

  .wheel {
    width: 22.5rem;   /* 360px */
    height: 22.5rem;
  }

  .prize-list__text {
    font-size: var(--font-size-md); /* restore 16px on tablet+ */
  }
}

@media (min-width: 1024px) {
  /* Two-column layout: wheel-column left, prize-card right.
     Figma "Main Container" uses items-start, so top-align both columns. */
  .spin-wheel {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 2.875rem; /* 46px — Figma Main Container gap (node 135:1684) */
    padding: var(--space-8) var(--space-8);
  }

  .spin-wheel__main {
    flex-shrink: 0;
  }

  .wheel {
    width: 30rem;     /* 480px */
    height: 30rem;
  }

  .spin-wheel__prizes {
    width: auto;
    flex-shrink: 0;
  }

  .prize-card {
    width: 25.3125rem; /* 405px lock-in */
  }
}

@media (min-width: 1280px) {
  .wheel {
    width: 36rem;     /* 576px — closer to Figma's 777px without overflowing */
    height: 36rem;
  }
}

/* ============================================================
   Modal: Result Popup
   ============================================================ */

/*
  Reuses the base .modal, .modal__backdrop, and .modal__close rules
  from the wrong-code modal. The .modal__card--result modifier adds
  the gold-border treatment, a slightly larger gap between sections,
  and overflow:hidden so the confetti canvas is clipped to the card's
  rounded corners.
*/
.modal__card--result {
  /* Figma node 120:1079 — "Reward popup" */
  border: 1px solid rgba(212, 175, 55, 0.25); /* gold @ 25% alpha — no token */
  gap: var(--space-4);  /* 16px between sections (Figma gap-16) */
  overflow: hidden;     /* keeps the confetti inside the rounded card */
}

/* Title — "অভিনন্দন!" */
.result__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 6vw, 2.125rem); /* 28→34px (Figma 34) */
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

/* Subtext — "আপনি পেয়েছেন" */
.result__subtext {
  margin: 0;
  text-align: center;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-sub-text);
}

/* Prize image wrapper — gold-tinted display panel.
   min-height keeps the modal a stable size as JS swaps prize images
   (cash illustrations, products, discount tag — all different ratios). */
.result__prize-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 8.75rem; /* 140px — stable across all 6 prize images */
  padding: var(--space-4);
  background: linear-gradient(
    to bottom,
    rgba(212, 175, 55, 0.1),
    rgba(212, 175, 55, 0.02)
  );
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-md);
}

.result__prize-image {
  display: block;
  max-width: 60%;
  max-height: 6rem; /* 96px — accommodates Figma's 82px image with headroom */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Prize name — gradient gold display text */
.result__prize-name {
  margin: 0;
  text-align: center;
  font-family: var(--font-playfair-display);
  font-weight: var(--font-weight-bold);
  font-style: italic;
  font-size: clamp(1.5rem, 5vw, 1.875rem); /* 24→30px (Figma 30) */
  line-height: var(--line-height-tight);
  background: var(--gradient-cta-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Fulfilment note — small white center-aligned */
.result__fulfilment {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-poppins);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

/* Confetti canvas — sits in front of the card, behind nothing.
   Per spec: z-index 1 with pointer-events: none.
   overflow:hidden on .modal__card--result clips it to the rounded corners. */
.result__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Spin Wheel: Spinning State (modifier)
   ============================================================ */

/*
  Screen 4 (Spinning) differs from Screen 3 (Ready) by a single visual
  change: the SPIN NOW button drops to 30% opacity (Figma node 168:112,
  `opacity-30` on the button container). Wheel, title, prize list,
  background, and button text are all unchanged.

  pointer-events is also disabled so the dimmed CTA cannot be re-clicked
  mid-spin, and the .fx-pressable hover/press transforms cannot fire.
*/
.screen--spin-wheel.is-spinning .btn--spin {
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 1280px) {
  .spin-wheel__prizes {
    position: initial;
  }

}

/* ============================================================
   Tooltip
   ============================================================ */

.tooltip-wrap {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 0.75rem); /* sits above button with 12px gap */
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  z-index: 50;

  /* Sizing */
  max-width: 18rem;
  width: max-content;
  padding: var(--space-3) var(--space-4);

  /* Appearance — use existing tokens */
  background: var(--color-background-secondary);
  color: var(--color-accent-secondary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-cta);

  /* Typography */
  font-family: var(--font-poppins);
  font-size: 0.875rem; /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-align: center;

  /* Animation */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.tooltip__arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--color-accent-primary);
}

.tooltip__arrow::after {
  content: '';
  position: absolute;
  top: -9px;
  left: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--color-background-secondary);
}

/* Show on hover or focus — DESKTOP ONLY (no touch)
   Only when the wrap has data-tooltip-eligible="true" (set by JS when
   state.hasSpun is true). */
@media (hover: hover) {
  .tooltip-wrap[data-tooltip-eligible="true"]:hover .tooltip,
  .tooltip-wrap[data-tooltip-eligible="true"]:focus-within .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Show when JS toggles data-tooltip-active="true" (tap-driven on mobile). */
.tooltip-wrap[data-tooltip-active="true"] .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* The tooltip must not be in DOM as hidden — remove the [hidden] state
   when eligible. The hidden attribute would prevent CSS transitions. */
.tooltip-wrap[data-tooltip-eligible="true"] .tooltip {
  display: block; /* override any default [hidden] */
}

/* ============================================================
   Spin Wheel: Post-Spin Hint
   ============================================================ */

.spin-wheel__hint {
  /* Positioning */
  margin-top: var(--space-8);    /* 32px gap from elements above */
  margin-bottom: var(--space-4); /* 16px breathing room at bottom */
  width: 100%;
  text-align: center;

  /* Typography */
  font-family: var(--font-poppins);
  font-size: 0.875rem;           /* 14px — small, hint-like */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);

  /* Color — muted, not competing with main content */
  color: var(--color-text-primary);
  opacity: 0.5;

  /* Subtle fade-in animation when revealed */
  animation: hintFadeIn 400ms ease-out;
}

@keyframes hintFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}

/* Mobile: smaller text, less margin */
@media (max-width: 768px) {
  .spin-wheel__hint {
    font-size: 0.8125rem;        /* 13px */
    margin-top: var(--space-6);  /* 24px */
    padding: 0 var(--space-4);   /* horizontal padding so text doesn't
                                    touch viewport edges */
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spin-wheel__hint {
    animation: none;
  }
}