:root {
  --red-1: #b5121b;
  --red-2: #8c0e16;
  --red-3: #d81f28;
  --gold: #f4c542;
  --gold-2: #c9922c;
  --cream: #fff7ef;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--red-2);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

/* فرم‌های نام/شماره باید عادی قابل انتخاب و تایپ بمونن */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

.game {
  position: relative;
  max-width: 520px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(14px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));
  background:
    radial-gradient(120% 60% at 50% 0%, var(--red-3) 0%, var(--red-1) 55%, var(--red-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2.5vh, 18px);
  overflow-x: hidden;
}

/* پیل شیشه‌ای/فلزی قرمز با یک نشان دایره‌ای که از لبه‌اش بیرون می‌زنه (طبق نمونه‌ای که فرستاده شد) */
.stat-pill {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #e2323a 0%, #b5121b 55%, #7a0d12 100%);
  color: #fff;
  font-weight: 900;
  padding: 5px 22px 5px 14px;
  border-radius: 999px;
  border: 2px solid #6b0d10;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.35);
  font-size: clamp(11px, 3vw, 13px);
  transition: transform .15s ease;
  white-space: nowrap;
}
.stat-pill.shake { animation: shake .45s ease; }
.pill-text { display: flex; align-items: baseline; gap: 4px; }
.stat-pill small { font-weight: 700; font-size: 0.72em; opacity: .9; }

.badge-circle {
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-circle.drawn-badge {
  background: radial-gradient(circle at 35% 30%, #ff5b62, #8c0e16 75%);
  border: 2px solid #5c0a0f;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticket-ic { width: 55%; height: 55%; fill: #fff; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- rules strip ---------- */
.rules-strip {
  width: 100%;
  text-align: center;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 700;
  color: var(--gold);
  opacity: .95;
}
.rules-strip b { color: #fff; }
.rules-sep { margin: 0 6px; opacity: .6; }

/* ---------- bonus toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff7ef, #ffe9c9);
  color: var(--red-1);
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 999px;
  border: 3px solid var(--gold);
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
  z-index: 60;
  animation: toastPop .3s ease;
  max-width: 90vw;
  text-align: center;
}
@keyframes toastPop {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ---------- hero (real brand artwork as one background image) ---------- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1920;
  background-image: url("../assets/images/machine-bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 18px;
  overflow: hidden;
}

/* هر آیکون/پیل مستقیماً نسبت به .hero پوزیشن مطلق می‌گیره — چون تودرتو کردن
   flex-column با width درصدی روی aspect-ratio باعث یک وابستگی دوری در اندازه‌گیری
   مرورگر می‌شد (اندازه‌ی آیکون‌ها اشتباه محاسبه می‌شد)، این روش قابل پیش‌بینی‌تره. */
.hero-topbar-side {
  position: absolute;
  inset: 0; /* اندازه‌اش دقیقاً برابر .hero بشه تا درصدهای فرزندها درست حساب بشن */
  pointer-events: none;
  z-index: 2;
}
.hero-topbar-side > * { pointer-events: auto; }
.hero-topbar-side.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  direction: ltr; /* تا flex-end واقعاً یعنی سمت راست، مستقل از rtl صفحه */
  gap: 1.2%;
  padding: 2.6% 4.5% 0 0;
}
.hero-topbar-side.right .stat-pill { direction: rtl; }

.hero-icon-btn {
  position: absolute;
  left: 1.5%;
  width: 10.5%;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s ease;
}
/* توجه: "top" درصدی نسبت به ارتفاع .hero حساب میشه، نه عرضش — چون هیرو حدود
   ۱.۷۸ برابر عرضش ارتفاع داره، فاصله‌ی بین آیکون‌ها باید با همین ضریب تبدیل بشه
   وگرنه فاصله‌ی واقعی روی گوشی خیلی بیشتر از چیزی به‌نظر میاد که در CSS نوشته شده. */
.hero-icon-btn:nth-child(1) { top: 1.1%; }
.hero-icon-btn:nth-child(2) { top: 7.9%; }
.hero-icon-btn:nth-child(3) { top: 14.6%; }
.hero-icon-btn:nth-child(4) { top: 21.4%; }
.hero-icon-btn:active { transform: scale(.9); }
.hero-icon-btn.photo {
  background-size: cover;
  background-position: center;
}
/* آیکون صدا همیشه حالت قطع (بلندگو+ضربدر) رو نشون میده؛ وقتی صدا روشنه یه نقطه‌ی
   سبز کوچیک اضافه میشه چون آیکون جداگانه‌ای برای حالت روشن نداریم */
#soundBtn.sound-on::after {
  content: "";
  position: absolute;
  left: -2%;
  top: -2%;
  width: 28%;
  height: 28%;
  background: #3ecf5e;
  border: 2px solid #fff;
  border-radius: 50%;
}
.hero-icon-btn.drawn {
  background: radial-gradient(circle at 35% 30%, #e2232c, #8c0e16 75%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), 0 3px 4px rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-icon-btn.drawn svg { width: 55%; height: 55%; fill: #fff; }

/* ---------- reels (overlaid on the blank windows baked into the hero image) ---------- */
.reels {
  position: absolute;
  left: 14.7%;
  top: 36.5%;
  width: 71.3%;
  height: 23%;
  z-index: 1;
}
.reel-window {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.reel-window:nth-child(1) { left: 0; width: 30.1%; }
.reel-window:nth-child(2) { left: 34.16%; width: 31.55%; }
.reel-window:nth-child(3) { left: 69.7%; width: 30.4%; }
.reel-window.win {
  animation: reelWin .5s ease infinite;
}
@keyframes reelWin {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 0 4px var(--gold), 0 0 18px 4px var(--gold); }
}
.reel-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  will-change: transform;
}
.symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
}
.symbol img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.reel-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.22));
}

/* ---------- progress bar (drawn on top of the hero's plain red gap) ---------- */
.progress-track {
  position: absolute;
  left: 19%; /* درست بعد از عکس ساعت شروع بشه، نه روش */
  top: 65.7%;
  width: 67%;
  height: 4.3%;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
  z-index: 1;
}
.progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--red-3), var(--red-1));
}
.progress-label {
  /* هم‌مرکز با کل ترکیب (چرخ‌ها/دکمه‌ی شروع) باشه، نه با خودِ نوار سفید —
     چون نوار سفید برای رد شدن از کنار ساعت، از وسطِ کل قاب کمی جابه‌جا شروع میشه.
     46.79% = همون نقطه‌ی 50.35% کل قاب، نسبت به عرض خودِ progress-track حساب‌شده. */
  position: absolute;
  left: 46.79%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: clamp(11px, 3.2vw, 14px);
  font-weight: 800;
  color: var(--red-1);
  white-space: nowrap;
  pointer-events: none;
  /* یک چیپ ریز و تمیز پشت متن، به‌جای هاله‌ی محو، تا روی هر دو حالت (نوار سفید
     و پر شدن با قرمز حین چرخش) خوانا و شیک بمونه */
  background: rgba(255, 255, 255, .92);
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* ---------- invisible click hitboxes over the baked-in start button / lever ---------- */
.start-hit {
  position: absolute;
  left: 28.3%;
  top: 72.6%;
  width: 44.1%;
  height: 6.5%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  border-radius: 999px;
}
.start-hit:disabled { cursor: default; }
.start-hit:disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(60, 0, 0, .45);
  border-radius: 999px;
}
.lever-hit {
  position: absolute;
  left: 88%;
  top: 29%;
  width: 12%;
  height: 23%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
  transition: transform .12s ease;
}
.lever-hit:active { transform: scale(.94); }
.lever-hit.disabled { pointer-events: none; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.overlay[hidden] { display: none; }
.win-card {
  width: min(340px, 100%);
  background: linear-gradient(180deg, #fff7ef, #ffe9c9);
  color: var(--red-1);
  border-radius: 20px;
  padding: 26px 22px;
  text-align: center;
  border: 4px solid var(--gold);
  box-shadow: 0 10px 0 rgba(0,0,0,.3);
  animation: popIn .25s ease;
}
@keyframes popIn {
  from { transform: scale(.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.win-card h2 { margin: 0 0 8px; font-size: clamp(20px, 6vw, 26px); }
.win-card p { margin: 0 0 18px; font-weight: 700; }
.win-card button {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--red-3), var(--red-1));
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  margin-top: 6px;
}
.settings-card { text-align: right; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 16px;
}
.switch-row input { width: 22px; height: 22px; }
.ghost-btn {
  background: #fff !important;
  color: var(--red-1) !important;
  border: 2px solid var(--red-1) !important;
}

/* ---------- phone / invite modals ---------- */
.text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #e5c99a;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--red-1);
  background: #fff;
  margin-bottom: 10px;
  text-align: center;
}
.text-input:focus { outline: none; border-color: var(--red-3); }
.form-error {
  color: #b30000;
  font-size: 13px;
  font-weight: 700;
  margin: -4px 0 10px;
}
.phone-card p, .invite-card p {
  font-size: 14px;
  line-height: 1.8;
}
.invite-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.invite-link-row .text-input { margin-bottom: 0; flex: 1; font-size: 13px; }
.invite-link-row button {
  flex-shrink: 0;
  width: auto;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: var(--gold-2);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
#shareInviteBtn { margin-top: 4px; }
.invite-status {
  min-height: 18px;
  font-weight: 700;
  color: #2f7a2f;
}

/* ---------- final results screen ---------- */
.final-card .final-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}
.final-card .final-score span {
  font-size: clamp(36px, 12vw, 52px);
  font-weight: 900;
  line-height: 1;
  color: var(--red-1);
}
.final-card .final-score small {
  font-weight: 700;
  opacity: .75;
}
#finalChancesUsed { font-weight: 700; margin-bottom: 4px; }
.final-hint { font-size: 13px; opacity: .85; margin-bottom: 16px !important; }

/* ---------- leaderboard ---------- */
.leaderboard-card { text-align: right; }
.my-rank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #ffe9a8, var(--gold-2));
  color: #6b3d0a;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.leaderboard-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 2px solid #e5c99a;
  border-radius: 12px;
}
.leaderboard-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f1ddb8;
  font-weight: 700;
  font-size: 14px;
}
.leaderboard-list li:last-child { border-bottom: none; }
.leaderboard-list li.me { background: #fff3d6; }
.leaderboard-list .rank {
  width: 24px;
  text-align: center;
  color: var(--gold-2);
  font-weight: 900;
}
.leaderboard-list .name { flex: 1; }
.leaderboard-list .score { color: var(--red-1); }
.leaderboard-empty, .leaderboard-loading {
  justify-content: center !important;
  opacity: .7;
  font-weight: 700;
}

/* ---------- responsive tweaks ---------- */
@media (max-width: 360px) {
  .game { padding-left: 10px; padding-right: 10px; }
}
@media (min-height: 800px) {
  .game { justify-content: center; }
}