/*
Theme Name: WeMasterTrade Lucky Wheel
Theme URI: https://wemastertrade.com
Author: WeMasterTrade
Description: WeMasterTrade – Lucky Wheel Theme
Version: 1.0.0
*/

:root {
  --color-gold: #d4af37;
  --color-gold-light: #f5e6a8;
  --color-gold-deep: #d4af37;

  --color-text-primary: #ffffff;
  --color-text-on-gold: #0a1a3f;
  --color-text-grey: #6d6d6d;
  --color-text-prize: rgba(26, 26, 26, 0.8);

  --color-surface-popup: #fcf4e5;
  --color-surface-close: rgba(255, 255, 255, 0.04);

  --color-border-gold: #d4af37;
  --color-border-gold-soft: rgba(212, 175, 55, 0.4);

  --color-backdrop: rgba(0, 0, 0, 0.8);

  --gradient-gold-button: linear-gradient(
    111.546deg,
    var(--color-gold) 0%,
    var(--color-gold-light) 50%,
    var(--color-gold-deep) 100%
  );
  --gradient-congrats: linear-gradient(to right, #facc15, #e9a62b);
  --gradient-prize-box: linear-gradient(
    to bottom,
    rgba(212, 175, 55, 0.1) 0%,
    rgba(212, 175, 55, 0.02) 100%
  );

  --font-sans: "Poppins", system-ui, sans-serif;
  --font-numeric: "Inter", "Poppins", system-ui, sans-serif;

  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-congrats: 1.625rem;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --letter-spacing-tight: 0.0125rem;

  --radius-lg: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 62.4375rem;

  --shadow-cta: 0 6px 22px 0 rgba(212, 175, 55, 0.25);
  --shadow-cta-inset: inset 0 1px 0 0 var(--color-gold-light);
  --shadow-surface-inset: inset 0 1px 0 0 rgba(212, 175, 55, 0.13);
  --shadow-popup: 0 30px 40px rgba(0, 0, 0, 0.35);

  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --spin-duration: 8s;
  --spin-ease: cubic-bezier(0.17, 0.67, 0.12, 0.99);

  --wheel-w: 659px;
  --logo-w: 320px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: #060606;
  /* Figma: the background art fills the frame (cover), centred. */
  background-image: url("./assets/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen--spin-wheel {
  position: relative;
  padding: 79px 10px 88px;
}

.brand-logo {
  display: block;
  width: min(var(--logo-w), 100%);
  aspect-ratio: 426 / 89;
  background-image: url("./assets/logo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    filter var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}

.btn--primary {
  color: var(--color-text-on-gold);
  background-image: var(--gradient-gold-button);
  box-shadow: var(--shadow-cta), var(--shadow-cta-inset);
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

.btn--primary:active:not(:disabled) {
  transform: translateY(1px);
}

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

.btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btn--spin {
  width: 236px;
  height: 51px;
}

.screen--spin-wheel .btn--spin:not(:disabled) {
  animation: spin-cta-pulse 2.2s ease-out infinite;
}

@keyframes spin-cta-pulse {
  0% {
    box-shadow: var(--shadow-cta), var(--shadow-cta-inset),
      0 0 0 0 rgba(245, 230, 168, 0.55);
  }
  55% {
    box-shadow: var(--shadow-cta), var(--shadow-cta-inset),
      0 0 0 12px rgba(245, 230, 168, 0);
  }
  100% {
    box-shadow: var(--shadow-cta), var(--shadow-cta-inset),
      0 0 0 12px rgba(245, 230, 168, 0);
  }
}

.screen--spin-wheel .btn--spin:focus-visible {
  outline: none;
}

.btn--block {
  width: 100%;
}

/* ---------- Spin wheel ---------- */

.spin-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: var(--wheel-w);
  max-width: 100%;
}

.spin-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--head-gap, 16px);
  width: 100%;
}

/* "Spin And Win" title under the logo, 75% of the wheel column's width, with
   the same soft drop shadow as the event title art. */
.spin-title {
  width: 75%;
  margin: 0;
  filter: drop-shadow(8px 6px 4px rgba(0, 0, 0, 0.35));
}

.spin-title__image {
  width: 100%;
  height: auto;
}

.wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* room for the podium base below the wheel */
  margin-bottom: 13%;
}

/* Podium base sits behind and below the wheel, so the disc appears mounted on it. */
.wheel__base {
  position: absolute;
  left: 50%;
  top: 76%;
  width: 46%;
  height: auto;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

/* Ground shadow under the podium, positioned from the base's bottom edge
   (76% top + 46% width * 548/700 base aspect). Precedes the base in the DOM
   so it paints beneath it. */
.wheel__shadow {
  position: absolute;
  left: 50%;
  /* Figma (578px wheel): 336px wide incl. blur, centred 4.6px above the base's bottom edge. */
  top: calc(76% + 46% * 548 / 700 - 100% * 4.6 / 578);
  width: calc(100% * 336 / 578);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

/* The rotating prize disc, seated inside the static bulb ring.
   spin.png is 1741x1744 with the disc (rim radius 867px) nearly filling it.
   It is sized so the rim has the same on-screen radius as the Figma layer
   (tucked under the ring band): 520.96px wide in the 578px ring frame.
   The disc pivots on the rim's centre, (49.981%, 49.885%) of the image,
   placed on the ring's hole centre (49.88%, 50.59% of frame-ring.png). The
   hub sits ~2.5px above that point and the slice edges converge ~3px below
   it, so pivoting midway keeps both within ~1px on screen while spinning. */
.wheel__rotor {
  --rotor-pivot-x: 49.981%;
  --rotor-pivot-y: 49.885%;
  position: absolute;
  left: 49.88%;
  top: 50.59%;
  width: calc(100% * 520.96 / 578);
  aspect-ratio: 1741 / 1744;
  z-index: 1;
  transform: translate(calc(-1 * var(--rotor-pivot-x)), calc(-1 * var(--rotor-pivot-y)))
    rotate(var(--rotor-angle, 0deg));
  transform-origin: var(--rotor-pivot-x) var(--rotor-pivot-y);
  will-change: transform;
}

.wheel__rotor.is-spinning {
  transition: transform var(--spin-duration) var(--spin-ease);
}

.wheel__disc,
.wheel__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Soft breathing glow on the three headline slices (24K gold bar, iPhone,
   $500 cash). The SVG shares spin.png's 1741x1744 coordinates and turns with
   it; each warm glow is clipped to its slice (edges measured from spin.png).
   The three fade gently in and out together, and fade away while the wheel
   spins. Soft-light blending warms the gold and cream backgrounds but leaves
   the white and black labels untouched. */
.wheel__glow {
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity 0.4s var(--motion-ease);
}

.wheel__rotor.is-spinning .wheel__glow {
  opacity: 0;
}

.wheel__glow-shapes {
  animation: wheel-glow 3.2s ease-in-out infinite;
}

@keyframes wheel-glow {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

/* Static centre pointer: covers the disc's hub and points straight up at the
   winning slice. In pointer.png the round cap is centred at (49.907%, 57.462%)
   with radius 174.36px and the arrow tip is directly above it, so that centre
   is placed on the ring's hole centre. The cap is drawn at radius 50.5px in
   the 578px ring frame, just over the disc's own hub (49.8px), so the hub
   never shows round it while the disc turns. */
.wheel__pointer {
  position: absolute;
  left: 49.88%;
  top: 50.59%;
  width: calc(100% * 351 * 50.5 / 174.36 / 578);
  height: auto;
  transform: translate(-49.907%, -57.462%);
  z-index: 2;
  pointer-events: none;
}

/* Static gold bulb ring (transparent centre). */
.wheel__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4));
}

/* ---------- Modals ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.modal[hidden] {
  display: none;
}

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

.modal__card {
  position: relative;
  z-index: 2;
  border: 1px solid var(--color-border-gold);
  background-color: var(--color-surface-popup);
  box-shadow: var(--shadow-popup), var(--shadow-surface-inset);
  animation: modal-in var(--motion-base) var(--motion-ease) both;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal__close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid var(--color-border-gold);
  border-radius: 50%;
  background-color: var(--color-surface-close);
  font-size: 18px;
  font-weight: var(--font-weight-light);
  line-height: 1;
  color: var(--color-gold);
  transition: background-color var(--motion-base) var(--motion-ease);
  z-index: 3;
}

.modal__close:hover {
  background-color: rgba(212, 175, 55, 0.12);
}

.modal__close:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.modal__card--result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  width: min(360px, 100%);
  padding: 49px 33px;
  border-radius: var(--radius-2xl);
}

.modal__card--result .modal__close {
  top: 12px;
  right: 19px;
}

.result__title {
  margin: 0;
  font-size: var(--font-size-congrats);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  line-height: 31px;
  text-align: center;
  background-image: var(--gradient-congrats);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.result__subtitle {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  text-align: center;
  color: var(--color-text-grey);
}

.result__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.result__prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 174.67px;
  padding: 23px 19px;
  border: 1px solid var(--color-border-gold-soft);
  border-radius: var(--radius-lg);
  background-image: var(--gradient-prize-box);
}

.result__prize-image-wrap {
  width: 110px;
  height: 110px;
  overflow: hidden;
}

.result__prize-image {
  width: 110px;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.result__prize-name {
  margin: 0;
  white-space: nowrap;
  font-size: var(--font-size-lg);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  line-height: 31px;
  text-align: center;
  color: var(--color-text-prize);
}

.modal__card--result .btn {
  height: 50.86px;
  font-family: var(--font-numeric);
}

.result__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Responsive ---------- */

@media (max-width: 1280px) {
  :root {
    --wheel-w: 560px;
  }
}

@media (max-width: 1080px) {
  :root {
    --wheel-w: 520px;
  }
}

@media (max-width: 760px) {
  :root {
    --wheel-w: min(440px, 88vw);
    --logo-w: min(240px, 60vw);
  }

  .screen--spin-wheel {
    padding: 48px 16px 56px;
  }
}

/*
 * Desktop: the wheel grows to fill the viewport height (up to the 659px design
 * size) instead of stepping down at fixed breakpoints. With column width w:
 * column height = logo (logo-w * 89/426) + head gap + title (0.75w * 762/4282)
 * + 2 gaps + wheel incl. podium (w * 1.14) + button + vertical padding.
 */
@media (min-width: 1001px) {
  .screen--spin-wheel {
    --spin-pad-y: 167px;
    --spin-gap: 26px;
    --spin-btn-h: 51px;
    --head-gap: 16px;
    --wheel-fit: calc(
      (100vh - var(--spin-pad-y) - var(--logo-w) * 0.20892 - var(--head-gap) - 2 * var(--spin-gap) - var(--spin-btn-h))
        / (1.14 + 0.75 * 762 / 4282)
    );
  }

  .spin-main {
    width: min(var(--wheel-w), max(300px, var(--wheel-fit)));
    gap: var(--spin-gap);
  }

  .btn--spin {
    height: var(--spin-btn-h);
  }
}

@media (min-width: 1001px) and (max-height: 1150px) {
  .screen--spin-wheel {
    --spin-pad-y: 64px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media (min-width: 1001px) and (max-height: 800px) {
  .screen--spin-wheel {
    --logo-w: 240px;
    --head-gap: 10px;
    --spin-gap: 20px;
    --spin-pad-y: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@media (min-width: 1001px) and (max-height: 730px) {
  .screen--spin-wheel {
    --logo-w: 195px;
    --head-gap: 8px;
    --spin-gap: 14px;
    --spin-btn-h: 44px;
    --spin-pad-y: 32px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --wheel-w: min(340px, 90vw);
  }

  .btn--spin {
    width: min(236px, calc(100vw - 32px));
  }

  .modal__card--result {
    padding: 40px 20px;
  }
}

/* Short screens: smaller logo (at 1001px+ the spin-screen rules above win). */
@media (min-width: 761px) and (max-height: 820px) {
  :root {
    --logo-w: 255px;
  }
}

@media (min-width: 761px) and (max-height: 680px) {
  :root {
    --logo-w: 195px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal__card {
    animation: none;
  }

  .wheel__rotor.is-spinning {
    transition: none;
  }

  /* No breathing: keep a still, faint glow. */
  .wheel__glow-shapes {
    animation: none;
    opacity: 0.45;
  }

  .screen--spin-wheel .btn--spin:not(:disabled) {
    animation: none;
  }

  .screen--spin-wheel .btn--spin:focus-visible {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 3px;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- MC Authentication Modal & Lock Button ---------- */

.btn-lock-session {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(10, 10, 12, 0.45);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all var(--motion-fast);
}

.btn-lock-session:hover {
  background-color: rgba(10, 10, 12, 0.85);
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: scale(1.05);
}

.btn-lock-session:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.modal--auth {
  z-index: 200;
}

.modal__card--auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(390px, calc(100vw - 32px));
  padding: 38px 28px 34px;
  border-radius: var(--radius-2xl);
  background-color: #0e0e12;
  border: 1.5px solid var(--color-border-gold);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.15);
  text-align: center;
}

.modal__card--auth.is-shaking {
  animation: auth-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes auth-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-9px);
  }
  40%, 80% {
    transform: translateX(9px);
  }
}

.auth__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  color: var(--color-gold);
}

.auth__title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auth__subtitle {
  margin: 0 0 22px;
  font-size: 0.875rem;
  color: #8c8c93;
}

.auth__form {
  width: 100%;
}

.auth__input-wrap {
  width: 100%;
  margin-bottom: 12px;
}

.auth__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-lg);
  background-color: #050507;
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  color: #ffffff;
  font-family: var(--font-numeric);
  font-size: 1.625rem;
  text-align: center;
  letter-spacing: 0.35em;
  outline: none;
  -webkit-text-security: disc;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.auth__input::placeholder {
  letter-spacing: 0.25em;
  color: #383842;
}

.auth__input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.auth__error {
  margin: 2px 0 16px;
  color: #ff5252;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
}

.auth__error[hidden] {
  display: none;
}

.auth__submit {
  width: 100%;
  height: 50px;
  font-family: var(--font-numeric);
  font-size: 0.9375rem;
}