:root{
  --cream:#FFF3E6;
  --gold:#F7C948;
  --gold2:#FFDFA0;
  --pomegranate:#B11226;
  --green:#18B05A;
  --ink: rgba(0,0,0,.55);
}
*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  color:var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Vazirmatn", Arial;
  overflow-x:hidden;

  background:
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.62)),
    var(--yalda-bg-url) center/cover no-repeat fixed,
    radial-gradient(1000px 620px at 50% 10%, rgba(255,59,87,.36), transparent 62%),
    radial-gradient(820px 540px at 16% 72%, rgba(247,201,72,.14), transparent 62%),
    radial-gradient(820px 540px at 84% 72%, rgba(24,176,90,.12), transparent 62%),
    radial-gradient(1200px 820px at 50% 120%, rgba(0,0,0,.55), transparent 58%),
    linear-gradient(180deg, #6b0a14, #24060a 72%, #140406);
}

.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 12px;
  padding: 22px 12px 28px;
  text-align:center;
}

/* پیام وقتی کمپین فعال نیست */
.topline{
  width: min(720px, 92vw);
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,223,160,.22);
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(255,223,160,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,243,230,.08), rgba(255,243,230,.04));
  box-shadow: 0 22px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  line-height: 1.9;
  color: rgba(255,243,230,.96);
  text-shadow: 0 14px 34px rgba(0,0,0,.45);
}

/* هدر بالای گردونه */
.heroText{
  width: min(880px, 92vw);
  margin: 0 auto 10px;
  padding: 14px 14px 14px;
  text-align: center;
  position: relative;
  border-radius: 22px;

  background:
    radial-gradient(520px 220px at 50% 0%, rgba(255,223,160,.14), transparent 60%),
    radial-gradient(520px 260px at 12% 30%, rgba(255,59,87,.12), transparent 68%),
    radial-gradient(520px 260px at 88% 70%, rgba(24,176,90,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,243,230,.07), rgba(255,243,230,.03));
  border: 1px solid rgba(255,223,160,.18);
  box-shadow: 0 26px 110px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
}

.heroText::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,223,160,.0),
      rgba(255,223,160,.18),
      rgba(255,223,160,.0)
    );
  opacity:.55;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px;
}

.heroTitle{
  margin: 0 0 8px;
  font-weight: 1000;
  font-size: clamp(22px, 3.25vw, 42px);
  letter-spacing: .2px;
  color: rgba(255,243,230,.98);
  line-height: 1.35;
  text-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 22px rgba(255,223,160,.10);
}

.heroTitle::after{
  content:"🍉";
  display: inline-block;
  margin-inline-start: .35em;
  transform: translateY(.08em);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  opacity: .92;
  font-size: .92em;
}

/* «بدون پوچ» فقط اناری */
.accentRed{
  color: var(--pomegranate);
  position: relative;
  padding: 0 .12em;
  text-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 0 16px rgba(177,18,38,.28);
}

.heroDesc{
  margin: 0 auto;
  max-width: 780px;
  font-size: clamp(13px, 1.55vw, 16px);
  line-height: 2.0;
  color: rgba(255,243,230,.92);
  text-shadow: 0 14px 34px rgba(0,0,0,.48);
  opacity: .98;
}

/* ✅ این بخش‌ها رو کامل حذف کردیم */
.heroLine, .pill, .pillDot{ display:none !important; }

canvas{
  width: min(780px, 96vw);
  height:auto;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.56));
  background: transparent;
  display:block;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.msg{
  min-height: 22px;
  opacity:.95;
  line-height: 1.9;
  text-shadow: 0 10px 22px rgba(0,0,0,.34);
  font-size: 14px;
  padding: 0 10px;
}

.spinForm{ display:none; }

/* =========================
   Modal (یلدایی/لوکس)
   ========================= */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(255,59,87,.22), transparent 62%),
    radial-gradient(900px 520px at 20% 80%, rgba(247,201,72,.14), transparent 62%),
    radial-gradient(900px 520px at 80% 80%, rgba(24,176,90,.10), transparent 62%),
    rgba(0,0,0,.62);
  padding: 18px;
  z-index: 999;
  backdrop-filter: blur(3px);
}

.modal .card{
  max-width: 720px;
  margin: 10vh auto;
  border-radius: 26px;
  padding: 18px;
  position: relative;
  text-align:right;
  overflow:hidden;

  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,223,160,.18), transparent 65%),
    radial-gradient(560px 320px at 20% 30%, rgba(255,59,87,.14), transparent 70%),
    radial-gradient(560px 320px at 85% 70%, rgba(24,176,90,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,243,230,.08), rgba(255,243,230,.04));

  border: 1px solid rgba(255,223,160,.20);
  box-shadow: 0 30px 120px rgba(0,0,0,.62);
  backdrop-filter: blur(14px);

  /* ✅ متن روشن داخل مودال */
  color: rgba(255,243,230,.96);
}

.modal .card p,
.modal .card div,
.modal .card span,
.modal .card small{
  color: rgba(255,243,230,.92);
}

.modal .card b,
.modal .card strong{
  color: rgba(255,223,160,.98);
}

.modal .card a{
  color: rgba(247,201,72,.98);
  text-decoration: none;
}
.modal .card a:hover{
  text-decoration: underline;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px 14px;
}

.modalTitle{
  margin:0;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
  text-shadow: 0 12px 26px rgba(0,0,0,.40);
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,243,230,.98);
}

.badge{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,223,160,.26);
  background: rgba(255,223,160,.10);
  color: rgba(255,243,230,.96);
  white-space: nowrap;
}

.modalBody{
  padding: 6px 10px 12px;
  line-height: 1.9;
  opacity: .96;
  text-shadow: 0 10px 22px rgba(0,0,0,.30);
}

.yaldaNote{
  margin: 0 0 12px;
  opacity: .95;
  font-size: 14px;
}

.modalCenter{ text-align:center; }
.modalEmoji{
  font-size: 44px;
  line-height: 1;
  margin: 6px 0 10px;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

.infoBox{
  margin: 10px 0 4px;
  border-radius: 18px;
  padding: 12px 12px;

  background:
    radial-gradient(240px 120px at 30% 30%, rgba(255,223,160,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,243,230,.08), rgba(255,243,230,.04));

  border: 1px solid rgba(255,223,160,.22);
  box-shadow: 0 18px 70px rgba(0,0,0,.30);
}

.infoTitle{
  font-weight: 950;
  color: rgba(255,223,160,.96);
  margin-bottom: 4px;
}

.infoHint{
  font-size: 13px;
  opacity: .92;
  color: rgba(255,243,230,.92);
}

.codeBox{
  margin: 12px 0 8px;
  border-radius: 18px;
  padding: 14px;
  position: relative;
  cursor: pointer;
  user-select: none;

  background:
    radial-gradient(240px 120px at 30% 30%, rgba(255,223,160,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,243,230,.10), rgba(255,243,230,.06));

  border: 1px solid rgba(255,223,160,.24);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}

.codeValue{
  font-weight: 950;
  font-size: 26px;
  letter-spacing: 2px;
  text-align:center;
  color: rgba(255,243,230,.98);
  text-shadow: 0 14px 28px rgba(0,0,0,.45);
}

.codeHint{
  margin-top: 8px;
  text-align:center;
  font-size: 12px;
  opacity: .85;
  color: rgba(255,243,230,.90);
}

.copyRow{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  align-items:center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.copyRowPad{
  padding: 0 10px 14px;
}

.btn{
  appearance:none;
  border: 1px solid rgba(255,223,160,.24);
  background: rgba(255,223,160,.10);
  color: var(--cream);
  border-radius: 16px;
  padding: 11px 14px;
  cursor:pointer;
  font-weight: 900;
  transition: transform .08s ease;
}
.btn:active{ transform: scale(.98); }

.btnPrimary{
  border-color: rgba(255,223,160,.32);
  background:
    radial-gradient(140px 60px at 30% 30%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(247,201,72,.22), rgba(247,201,72,.12));
}

.btnClose{
  border: 1px solid rgba(255,243,230,.20);
  background: rgba(255,243,230,.06);
}

.copyToast{
  display:none;
  margin-left:auto;
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(24,176,90,.22);
  background: rgba(24,176,90,.12);
  color: rgba(255,243,230,.96);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
  white-space: nowrap;
}

/* لینک‌های عمومی سایت */
a{ color: var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================
   Wheel Locked (Guest users)
   ========================= */

.wheelStage{
  position: relative;
  width: min(780px, 96vw);
  display: grid;
  place-items: center;
}

.wheelStage.isLocked canvas{
  filter: blur(10px) saturate(.95) brightness(.92) drop-shadow(0 30px 70px rgba(0,0,0,.56));
  transform: scale(1.01);
}

.wheelStage.isLocked{
  pointer-events: none;
}

.lockOverlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  pointer-events: auto;
}

.lockCard{
  width: min(620px, 92%);
  border-radius: 26px;
  padding: 18px 16px 16px;
  text-align: right;
  direction: rtl;

  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,223,160,.18), transparent 65%),
    radial-gradient(560px 320px at 20% 30%, rgba(255,59,87,.14), transparent 70%),
    radial-gradient(560px 320px at 85% 70%, rgba(24,176,90,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,243,230,.10), rgba(255,243,230,.05));

  border: 1px solid rgba(255,223,160,.22);
  box-shadow: 0 30px 120px rgba(0,0,0,.62);
  backdrop-filter: blur(14px);
}

/* ✅ پیل اناری */
.lockBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;

  border: 1px solid rgba(177,18,38,.38);
  background:
    radial-gradient(140px 60px at 30% 30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(177,18,38,.40), rgba(177,18,38,.22));

  color: rgba(255,243,230,.98);
  font-weight: 950;
  font-size: 12px;

  box-shadow: 0 16px 40px rgba(0,0,0,.32);
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
  margin-bottom: 10px;
}

/* ✅ تیتر سبز یلدایی */
.lockTitle{
  font-size: 20px;
  font-weight: 1000;
  color: rgba(24,176,90,.98); /* سبز یلدایی */
  text-shadow:
    0 14px 28px rgba(0,0,0,.45),
    0 0 18px rgba(24,176,90,.22);
  line-height: 1.6;
  margin-bottom: 8px;
}

.lockDesc{
  color: rgba(255,243,230,.92);
  line-height: 2;
  font-size: 14px;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
  margin-bottom: 14px;
}

.lockActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btnGhost{
  appearance: none;
  border: 1px solid rgba(255,243,230,.22);
  background: rgba(255,243,230,.06);
  color: rgba(255,243,230,.96);
  border-radius: 16px;
  padding: 11px 14px;
  cursor: pointer;
  font-weight: 900;
  transition: transform .08s ease;
}
.btnGhost:active{ transform: scale(.98); }

.lockHint{
  margin-top: 12px;
  font-size: 12px;
  opacity: .9;
  color: rgba(255,243,230,.88);
  text-shadow: 0 10px 18px rgba(0,0,0,.30);
}