/* ═══════════════════════════════════════════════════════════════════════════
   Raffle — dark trading-floor theme, gold on deep indigo.
   Layout is direction-agnostic: logical properties everywhere so the same
   rules serve LTR (en) and RTL (fa / ar).
   ═══════════════════════════════════════════════════════════════════════════ */

/* One variable file covers Latin + Persian + Arabic across the full weight axis. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/vazirmatn-var.woff2') format('woff2-variations'),
       url('/fonts/vazirmatn-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --bg: #070a18;
  --bg-2: #0c1128;
  --ink: #eef1ff;
  --ink-dim: #9aa3c7;
  --gold: #ffd166;
  --gold-hi: #ffe9a8;
  --gold-lo: #c9902f;
  --cyan: #42d4ff;
  --violet: #8b6cff;

  --radius: 20px;
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Ambient background ─────────────────────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 50% -10%, #16204a 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 110%, #2a1442 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}

.bg__grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(120, 150, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 150, 255, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(600px) rotateX(62deg) translateY(-10%);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 55%, transparent 85%);
  animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 0 62px, 62px 0; }
}

.bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: orbFloat 18s ease-in-out infinite;
}
.bg__orb--a { width: 46vmax; height: 46vmax; background: #2d4bff33; inset-block-start: -14%; inset-inline-start: -10%; }
.bg__orb--b { width: 40vmax; height: 40vmax; background: #ffb02e2e; inset-block-end: -16%; inset-inline-end: -8%; animation-delay: -6s; }
.bg__orb--c { width: 32vmax; height: 32vmax; background: #a34bff26; inset-block-start: 40%; inset-inline-start: 55%; animation-delay: -12s; }

@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3vw, -4vh, 0) scale(1.12); }
}

.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
}

/* Rotating god-rays behind the winner reveal. */
.rays {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 180vmax;
  height: 180vmax;
  margin-block-start: -90vmax;
  margin-inline-start: -90vmax;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 209, 102, 0.14) 0deg 6deg,
    transparent 6deg 18deg
  );
  mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  animation: raysSpin 26s linear infinite;
}
.rays.is-on { opacity: 1; }
@keyframes raysSpin { to { transform: rotate(360deg); } }

.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 40px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand__mark {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.45));
  animation: markSpin 14s linear infinite;
}
@keyframes markSpin { to { transform: rotate(360deg); } }
.brand__text { font-size: clamp(15px, 1.6vw, 19px); }

.topbar__actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
  backdrop-filter: blur(10px);
}
.icon-btn:hover { color: var(--gold); border-color: rgba(255, 209, 102, 0.4); transform: translateY(-1px); }
.icon-btn .ico { grid-area: 1 / 1; }
.icon-btn .ico--off { display: none; }
.icon-btn.is-muted .ico--on { display: none; }
.icon-btn.is-muted .ico--off { display: block; }

.lang {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}
.lang-btn {
  position: relative;
  z-index: 1;
  min-inline-size: 42px;
  block-size: 32px;
  border: 0;
  background: none;
  border-radius: 9px;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.22s;
}
.lang-btn.is-active { color: #1a1030; }
.lang__pill {
  position: absolute;
  z-index: 0;
  inset-block: 4px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo));
  box-shadow: 0 4px 16px rgba(255, 209, 102, 0.35);
  transition: inset-inline-start 0.32s cubic-bezier(0.4, 1.3, 0.4, 1), inline-size 0.32s cubic-bezier(0.4, 1.3, 0.4, 1);
}

/* ── Stage / screens ────────────────────────────────────────────────────── */
.stage {
  position: relative;
  z-index: 20;
  display: grid;
  place-items: center;
  block-size: calc(100dvh - 76px);
  padding: 0 clamp(16px, 4vw, 40px) 24px;
}

.screen {
  grid-area: 1 / 1;
  display: none;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 1100px;
  text-align: center;
}
.screen.is-active { display: flex; animation: screenIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.screen.is-leaving { animation: screenOut 0.34s ease-in both; }
@keyframes screenOut {
  to { opacity: 0; transform: translateY(-14px) scale(0.97); filter: blur(8px); }
}

/* ── Intro ──────────────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 10px;
  color: var(--ink-dim);
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: 0.02em;
}

.title {
  margin: 0 0 clamp(18px, 3vh, 34px);
  font-size: clamp(34px, 7vw, 76px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #fff 0%, var(--gold-hi) 30%, var(--gold) 50%, #fff 72%, var(--gold-hi) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShimmer 6s linear infinite;
  filter: drop-shadow(0 8px 30px rgba(255, 209, 102, 0.22));
}
@keyframes titleShimmer { to { background-position: 250% 0; } }

.prize-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-end: clamp(22px, 4vh, 42px);
}

.prize-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 209, 102, 0.28);
  background: rgba(255, 209, 102, 0.07);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 600;
  color: var(--gold-hi);
  backdrop-filter: blur(8px);
  animation: badgeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 90ms);
}
.prize-badge.is-won { border-color: rgba(255, 209, 102, 0.7); background: rgba(255, 209, 102, 0.18); }
.prize-badge__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}
@keyframes badgeIn {
  from { opacity: 0; transform: translateY(14px) scale(0.9); }
}

/* ── Call to action ─────────────────────────────────────────────────────── */
.cta {
  position: relative;
  isolation: isolate;
  padding: 18px clamp(34px, 6vw, 62px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
  color: #1a1030;
  font-family: inherit;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 10px 40px -8px rgba(255, 209, 102, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.18s cubic-bezier(0.34, 1.6, 0.5, 1), box-shadow 0.25s;
  animation: ctaPulse 2.8s ease-in-out infinite;
}
.cta:hover  { transform: translateY(-3px) scale(1.035); box-shadow: 0 18px 60px -8px rgba(255, 209, 102, 0.75); }
.cta:active { transform: translateY(0) scale(0.98); }
.cta:disabled { opacity: 0.55; cursor: not-allowed; animation: none; transform: none; }

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 40px -8px rgba(255, 209, 102, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  50%      { box-shadow: 0 14px 56px -6px rgba(255, 209, 102, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}

/* Sheen that sweeps across the button. */
.cta__glow {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inline-size: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  filter: blur(6px);
  animation: sheen 3.4s ease-in-out infinite;
}
@keyframes sheen {
  0%       { transform: translateX(-160%) skewX(-18deg); }
  55%,100% { transform: translateX(320%)  skewX(-18deg); }
}

.cta--sm { padding: 14px 34px; font-size: clamp(14px, 1.6vw, 17px); }
.cta--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--gold-hi);
  border: 1px solid rgba(255, 209, 102, 0.35);
  box-shadow: none;
  animation: none;
}
.cta--ghost:hover { background: rgba(255, 209, 102, 0.12); box-shadow: none; }

.meta {
  margin-block-start: clamp(18px, 3vh, 30px);
  color: var(--ink-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Draw screen ────────────────────────────────────────────────────────── */
.draw-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: clamp(10px, 2vh, 20px);
}

.chip {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 209, 102, 0.3);
  background: rgba(255, 209, 102, 0.1);
  color: var(--gold-hi);
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 700;
}
.chip--gold {
  border: 0;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo));
  color: #1a1030;
  box-shadow: 0 6px 22px -4px rgba(255, 209, 102, 0.6);
}

.status {
  color: var(--ink-dim);
  font-size: clamp(13px, 1.5vw, 16px);
  animation: statusBlink 1.6s ease-in-out infinite;
}
@keyframes statusBlink { 50% { opacity: 0.45; } }

.wheel-wrap {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(54vh, 84vw, 540px);
  block-size: min(54vh, 84vw, 540px);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s, filter 0.6s;
}
.wheel-wrap canvas { position: relative; z-index: 2; }

.wheel-halo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.22) 0%, transparent 62%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 0.5s;
}
.wheel-wrap.is-hot .wheel-halo { opacity: 1; animation: haloPulse 1.4s ease-in-out infinite; }
@keyframes haloPulse { 50% { transform: scale(1.09); } }

/* Once the reels take over, the wheel recedes instead of disappearing. */
.wheel-wrap.is-receded { transform: scale(0.52) translateY(-6%); opacity: 0.32; filter: blur(2px) saturate(0.7); }

/* ── Digit reels ────────────────────────────────────────────────────────── */
.reels-shell {
  margin-block-start: clamp(14px, 3vh, 30px);
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.reels-shell.is-on { opacity: 1; transform: none; }

.reels-shell__label {
  margin-block-end: 10px;
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reels {
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  justify-content: center;
  direction: ltr; /* account numbers always read left-to-right */
}

.reel {
  position: relative;
  inline-size: clamp(42px, 7vw, 78px);
  block-size: clamp(62px, 10vw, 104px);
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #131a36, #0a0e22);
  box-shadow:
    inset 0 14px 22px -14px rgba(0, 0, 0, 0.95),
    inset 0 -14px 22px -14px rgba(0, 0, 0, 0.95),
    0 12px 34px -16px rgba(0, 0, 0, 0.9);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.reel.is-locked {
  border-color: rgba(255, 209, 102, 0.75);
  box-shadow:
    inset 0 14px 22px -14px rgba(0, 0, 0, 0.9),
    0 0 34px -4px rgba(255, 209, 102, 0.65);
  animation: reelLand 0.5s cubic-bezier(0.24, 1.6, 0.4, 1);
}
@keyframes reelLand {
  0%   { transform: scale(1.16) translateY(3px); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.reel__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* One full 0-9 cycle. The strip repeats every cycle, so this loops seamlessly. */
@keyframes reelSpin {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--cycle, -8.3333%)); }
}

.reel__cell {
  display: grid;
  place-items: center;
  block-size: clamp(62px, 10vw, 104px);
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: clamp(30px, 5.4vw, 56px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.reel.is-locked .reel__cell { color: var(--gold-hi); text-shadow: 0 0 22px rgba(255, 209, 102, 0.7); }

/* Glass highlight across the reel window. */
.reel__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.09) 0%,
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.35) 100%);
}

/* ── Winner card ────────────────────────────────────────────────────────── */
.winner-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 52px) clamp(28px, 6vw, 72px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 209, 102, 0.32);
  background:
    linear-gradient(160deg, rgba(255, 209, 102, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(12, 16, 38, 0.82);
  box-shadow: var(--shadow-lg), 0 0 90px -20px rgba(255, 209, 102, 0.45);
  backdrop-filter: blur(20px);
  animation: cardIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(40px) scale(0.86) rotateX(14deg); }
}

.winner-card__shine {
  position: absolute;
  inset-block-start: -60%;
  inset-inline-start: -30%;
  inline-size: 60%;
  block-size: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: rotate(18deg);
  animation: cardShine 4.5s ease-in-out infinite;
}
@keyframes cardShine {
  0%       { transform: translateX(-60%) rotate(18deg); }
  55%,100% { transform: translateX(360%) rotate(18deg); }
}

.winner-card__congrats {
  margin: 18px 0 4px;
  font-size: clamp(20px, 3.4vw, 34px);
  font-weight: 800;
  color: var(--gold-hi);
}
.winner-card__label {
  margin: 0 0 6px;
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.winner-card__number {
  direction: ltr;
  font-family: var(--font-num);
  font-size: clamp(46px, 9vw, 104px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff, var(--gold) 60%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(255, 209, 102, 0.5));
  animation: numberPop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes numberPop {
  from { transform: scale(0.55); opacity: 0; filter: blur(10px); }
}
.winner-card__actions { margin-block-start: clamp(20px, 3vh, 32px); }

/* ── Summary ────────────────────────────────────────────────────────────── */
.summary__title {
  margin: 0 0 clamp(18px, 3vh, 32px);
  font-size: clamp(26px, 4.4vw, 46px);
  font-weight: 800;
  color: var(--gold-hi);
}

.summary__list {
  display: grid;
  gap: 12px;
  inline-size: min(100%, 620px);
  margin: 0 0 clamp(24px, 4vh, 40px);
  padding: 0;
  list-style: none;
}

.summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  animation: rowIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 110ms);
}
.summary__row:first-child {
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.1);
}
@keyframes rowIn { from { opacity: 0; transform: translateY(18px); } }

.summary__rank { color: var(--gold-hi); font-weight: 700; font-size: clamp(14px, 1.6vw, 17px); }
.summary__num {
  direction: ltr;
  font-family: var(--font-num);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 800;
  color: var(--ink);
}

/* ── Motion / responsive ────────────────────────────────────────────────── */
@media (max-height: 700px) {
  .wheel-wrap { inline-size: min(42vh, 70vw, 360px); block-size: min(42vh, 70vw, 360px); }
  .title { font-size: clamp(28px, 5vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .bg__grid, .bg__orb, .brand__mark, .rays,
  .cta, .cta__glow, .title, .winner-card__shine, .status { animation: none !important; }
  .screen.is-active { animation-duration: 0.01ms; }
}