:root {
  --bg: #120b26;
  --bg-glow: #3b1d7a;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: #1d1438;
  --border: rgba(255, 255, 255, 0.12);
  --text: #f5f3ff;
  --muted: #c4b8ee;
  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
  --gold: #fbbf24;
  --gold-deep: #d97706;
  --danger: #fca5a5;
  --success: #86efac;
  --radius: 16px;
  --font: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 50% -10%, var(--bg-glow), transparent 70%), var(--bg);
  line-height: 1.8;
  -webkit-tap-highlight-color: transparent;
}

.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; padding: .5rem 1rem; background: var(--gold); color: #111; border-radius: 8px; z-index: 10; }
.skip:focus { top: 1rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.banner { display: flex; flex-wrap: wrap; gap: .25rem .75rem; justify-content: center; padding: .6rem 1rem; font-size: .9rem; background: #3f2a00; color: #fde68a; border-bottom: 1px solid #a16207; text-align: center; }
.banner bdi { font-weight: 700; letter-spacing: .15em; }

.hero { text-align: center; padding: 2rem 1rem .5rem; }
.hero h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 900; background: linear-gradient(90deg, var(--gold), #fde68a, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: .25rem 0 0; color: var(--muted); }

.layout { display: grid; gap: 2rem; max-width: 1040px; margin: 0 auto; padding: 1.5rem 16px 3rem; align-items: center; }
@media (min-width: 900px) { .layout { grid-template-columns: 1.1fr 1fr; } }

/* Wheel */
.wheel-area { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.wheel-wrap { position: relative; width: min(86vw, 420px); aspect-ratio: 1; }
.wheel {
  width: 100%; height: 100%; display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--gold-deep), 0 0 0 10px #fde68a33, 0 20px 60px #000a, 0 0 80px #8b5cf655;
}
.rotor {
  transform-origin: 0 0; /* the viewBox is centred on 0,0 */
  will-change: transform;
}
.wheel text { font-family: var(--font); font-weight: 700; fill: #fff; paint-order: stroke; stroke: #0005; stroke-width: .6px; }
.pointer {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0; border-inline: 16px solid transparent; border-top: 32px solid var(--gold);
  filter: drop-shadow(0 3px 4px #0008);
}
.hub {
  position: absolute; inset: 0; margin: auto; width: 18%; height: 18%; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; font-size: clamp(1rem, 4vw, 1.6rem); color: #7c2d12;
  background: radial-gradient(circle at 35% 30%, #fff7d6, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 4px 14px #0009, inset 0 -3px 6px #0003;
}
.lock {
  position: absolute; inset: 0; border-radius: 50%; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  background: rgba(18, 11, 38, .62); backdrop-filter: blur(2px); font-weight: 700; text-align: center; padding: 2rem;
  transition: opacity .3s ease;
}
.lock-icon { font-size: 2rem; }
.wheel-wrap[data-locked="false"] .lock { opacity: 0; pointer-events: none; }

/* Panel */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; backdrop-filter: blur(8px); outline: none; }
.steps { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; counter-reset: s; }
.steps li { flex: 1; counter-increment: s; font-size: .8rem; color: var(--muted); text-align: center; padding-top: .5rem; border-top: 3px solid var(--border); }
.steps li::before { content: counter(s, persian) ". "; }
.steps li[aria-current="step"] { color: var(--text); border-color: var(--gold); font-weight: 700; }
.steps li.done { color: var(--success); border-color: var(--success); }

form { display: flex; flex-direction: column; gap: .5rem; }
label { font-weight: 700; }
input {
  font: inherit; font-size: 1.15rem; /* >=16px stops iOS zoom */
  padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-strong); color: var(--text); text-align: left;
}
input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--danger); }
.code-input { letter-spacing: .5em; text-align: center; font-size: 1.5rem; font-weight: 700; }
.hint { margin: 0; font-size: .85rem; color: var(--muted); }
.lead { margin: 0; }
.error { margin: 0; min-height: 1.5em; color: var(--danger); font-size: .9rem; }
.success { margin: 0 0 .25rem; color: var(--success); font-weight: 700; font-size: 1.1rem; }
.loading { color: var(--muted); }
.num { font-weight: 700; }

.btn {
  font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: .8rem 1.25rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background-color .15s ease, transform .1s ease, opacity .15s ease;
  touch-action: manipulation; user-select: none;
}
.btn:focus-visible, .link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-gold { background: linear-gradient(180deg, #fde68a, var(--gold) 40%, var(--gold-deep)); color: #431407; box-shadow: 0 8px 24px #d9770666; }
.btn-lg { font-size: 1.25rem; padding: 1rem 3rem; border-radius: 999px; }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
  .btn-ghost:hover:not(:disabled) { background: var(--surface); }
}
.btn[aria-busy="true"]::after {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite;
}
.link { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn[aria-busy="true"]::after { animation: none; border-inline-end-color: currentColor; opacity: .6; }
}

/* Animated aurora and golden stardust */
body { background: #09051b; isolation: isolate; overflow-x: clip; }
body::before, body::after { content: ''; position: fixed; pointer-events: none; inset: -12%; }
body::before {
 z-index: -2;
 background: radial-gradient(ellipse at 12% 18%, #8b26dc99, transparent 43%), radial-gradient(ellipse at 90% 65%, #5234e6aa, transparent 46%), radial-gradient(ellipse at 72% 15%, #ed9f3450, transparent 35%), radial-gradient(ellipse at 25% 90%, #df28744d, transparent 40%), #09051b;
 animation: aurora-flow 14s ease-in-out infinite alternate;
}
body::after {
 z-index: -1; opacity: .65;
 background-image: radial-gradient(circle, #ffe4a4 1.1px, transparent 1.8px), radial-gradient(circle, #c6a9ff 1px, transparent 1.8px), radial-gradient(circle, #fff1cc 1.5px, transparent 2.5px);
 background-size: 127px 173px, 211px 137px, 317px 251px;
 background-position: 18px 37px, 89px 14px, 130px 160px;
 mask-image: linear-gradient(90deg, #000, #0005 40%, #0008 65%, #000);
 animation: stardust-drift 22s linear infinite alternate;
}
@keyframes aurora-flow {
 0% { transform: translate3d(-2%, -2%, 0) scale(1); filter: hue-rotate(0deg); }
 50% { transform: translate3d(3%, 1%, 0) scale(1.08); filter: hue-rotate(14deg); }
 100% { transform: translate3d(-1%, 4%, 0) scale(1.04); filter: hue-rotate(-12deg); }
}
@keyframes stardust-drift { from { transform: translate3d(0, 0, 0); opacity: .4; } to { transform: translate3d(16px, -55px, 0); opacity: .8; } }
.panel { background: linear-gradient(145deg, #251943de, #110d26e8); border-color: #d1b2ff38; box-shadow: 0 24px 70px #0005, inset 0 1px 0 #ffffff0d; backdrop-filter: blur(16px); }
.hero h1 { filter: drop-shadow(0 3px 18px #f6bf3945); }
.banner { background: #2c1c06e8; backdrop-filter: blur(12px); }
@media (max-width: 600px) { body::after { background-size: 157px 197px, 251px 177px, 367px 291px; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none !important; } }

/* Slow, staggered celebration bursts behind the interface */
.fireworks { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fireworks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; color: #ffd77c; left: 12%; top: 25%; opacity: 0;
 box-shadow: 0 -100px 0 currentColor, 38px -92px 0 currentColor, 71px -71px 0 currentColor, 92px -38px 0 currentColor, 100px 0 0 currentColor, 92px 38px 0 currentColor, 71px 71px 0 currentColor, 38px 92px 0 currentColor, 0 100px 0 currentColor, -38px 92px 0 currentColor, -71px 71px 0 currentColor, -92px 38px 0 currentColor, -100px 0 0 currentColor, -92px -38px 0 currentColor, -71px -71px 0 currentColor, -38px -92px 0 currentColor, 18px -55px 0 #fff1c2, 55px 18px 0 #fff1c2, -18px 55px 0 #fff1c2, -55px -18px 0 #fff1c2;
 filter: drop-shadow(0 0 5px currentColor); animation: celebration-burst 7s cubic-bezier(.12,.6,.22,1) infinite;
}
.fireworks i:nth-child(2) { left: 85%; top: 18%; color: #c5a0ff; animation-delay: -2.3s; }
.fireworks i:nth-child(3) { left: 77%; top: 83%; color: #ffc67a; animation-delay: -4.8s; }
.fireworks i:nth-child(4) { left: 18%; top: 78%; color: #f5a8d5; animation-delay: -1.2s; }
.fireworks i:nth-child(5) { left: 48%; top: 12%; color: #e4ceff; animation-delay: -5.8s; }
@keyframes celebration-burst {
 0%, 8% { opacity: 0; transform: translateY(45px) scale(.03); }
 12% { opacity: .85; transform: translateY(0) scale(.2); }
 28% { opacity: .65; transform: translateY(7px) scale(1); }
 48% { opacity: 0; transform: translateY(38px) scale(1.45); }
 100% { opacity: 0; transform: translateY(38px) scale(1.45); }
}
@media (max-width: 600px) { .fireworks i { zoom: .7; } .fireworks i:nth-child(5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .fireworks { display: none; } }

/* Independent gold orbit: visible even while verification locks the wheel. */
.wheel-wrap::before {
 content: ''; position: absolute; inset: -14px; z-index: 4; border-radius: 50%; padding: 5px; pointer-events: none;
 background: conic-gradient(from 0deg, #b8751622 0deg, #d89c3233 200deg, #ffcf4a 275deg, #fff6c7 310deg, #fff 320deg, #ffc843 330deg, #b8751622 360deg);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor; mask-composite: exclude;
 filter: drop-shadow(0 0 5px #ffd95b) drop-shadow(0 0 12px #efaa25);
 animation: gold-orbit 3.6s linear infinite;
}
.wheel-wrap::after {
 content: ''; position: absolute; inset: -17px; z-index: 0; border-radius: 50%; pointer-events: none;
 border: 1px solid #f5c45466; box-shadow: 0 0 20px #e9b43240, inset 0 0 12px #f5c45426;
}
@keyframes gold-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wheel-wrap::before { animation: none !important; } }

/* Mobile: put verification within reach and reduce animation cost. */
@media (max-width: 600px) {
 .banner { padding: .4rem .75rem; font-size: .73rem; gap: 0 .4rem; line-height: 1.6; }
 .hero { padding: 1rem 1rem .25rem; }
 .hero h1 { font-size: 1.9rem; }
 .hero p { font-size: .85rem; max-width: 32ch; margin: .25rem auto 0; }
 .layout { gap: 1.8rem; padding: .8rem 16px max(2rem, env(safe-area-inset-bottom)); }
 .layout > * { min-width: 0; }
 .panel { order: -1; padding: 1rem; backdrop-filter: none; background: #1c1237f5; }
 .steps { margin-bottom: .8rem; gap: .35rem; }
 .steps li { font-size: .7rem; }
 input { width: 100%; min-width: 0; min-height: 48px; font-size: 1rem; scroll-margin-top: 1rem; }
 .btn { min-height: 48px; }
 .link { min-height: 44px; display: inline-flex; align-items: center; }
 .hint { font-size: .77rem; }
 .error { font-size: .8rem; }
 .wheel-wrap { width: min(74vw, 300px); }
 .wheel-area { gap: 1.1rem; padding-top: .3rem; }
 .btn-lg { font-size: 1.1rem; padding: .7rem 2.6rem; }
 .lock { padding: 1rem; font-size: .9rem; backdrop-filter: none; }
 body::before { animation: none; filter: none; }
 .fireworks i:nth-child(n+4) { display: none; }
 .fireworks i { filter: none; }
 .wheel-wrap::before { animation-duration: 5s; filter: drop-shadow(0 0 5px #efaa25); }
}

/* Rotate the light inside its circle, without rotating a square layout box. */
@property --gold-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.wheel-wrap::before { background: conic-gradient(from var(--gold-angle), #b8751622 0deg, #d89c3233 200deg, #ffcf4a 275deg, #fff6c7 310deg, #fff 320deg, #ffc843 330deg, #b8751622 360deg); }
@keyframes gold-orbit { from { --gold-angle: 0deg; transform: none; } to { --gold-angle: 360deg; transform: none; } }

/* Mobile showcase: gifts stay visible; verification still gates the spin. */
@media (max-width: 600px) {
 .panel { order: 0; }
 .wheel-area { order: -1; width: 100%; padding-top: 1rem; }
 .wheel-wrap { width: min(80vw, 330px); margin-inline: auto; }
 .wheel-wrap .lock { visibility: hidden; opacity: 0; pointer-events: none; }
 .layout { justify-items: center; gap: 1.8rem; }
 .panel { width: 100%; }
 .wheel text { stroke-width: .4px; }
}
@media (max-width: 600px) {
 .wheel-wrap[data-locked="true"] .lock { visibility: visible; opacity: 1; background: rgba(18,11,38,.22); backdrop-filter: blur(.7px); }
 .wheel-wrap[data-locked="true"] .lock > * { visibility: hidden; }
 .panel { scroll-margin-block: 1rem; }
}