/* =========================================================================
   پرونده‌ی C8H11NO2 — «ماجرای سالگرد گمشده»
   main.css — توکن‌های طراحی + استایل‌های مشترک
   (سینماییِ تیره: بوم تقریباً سیاه، یک لهجه‌ی کهربایی، خط‌های مو، مونو-لیبل)
   ========================================================================= */

/* ---------------- توکن‌های طراحی ---------------- */
:root {
  /* رنگ‌ها */
  --bg-primary: #0e0d0c;
  --bg-secondary: #1a1815;
  --bg-elevated: #221f1b;

  --accent-amber: #d4a24e;
  --accent-amber-strong: #e8b96a;
  --accent-amber-soft: rgba(212, 162, 78, .14);

  --text-primary: #e8e0d0;
  --text-muted: #9a9183;
  --text-faint: #6b645a;

  --border-subtle: rgba(212, 162, 78, .16);
  --border-strong: rgba(212, 162, 78, .38);

  --danger: #cf7a4d; /* فقط برای خطای ورودی */

  /* سایه‌ها */
  --shadow-noir: 0 18px 50px -12px rgba(0, 0, 0, .85);
  --shadow-card: 0 10px 34px -14px rgba(0, 0, 0, .7);
  --glow-amber: 0 0 0 1px rgba(212, 162, 78, .28), 0 0 30px -4px rgba(212, 162, 78, .35);
  --glow-amber-soft: 0 0 18px -6px rgba(212, 162, 78, .3);

  /* تایپوگرافی */
  --font-body: 'Vazirmatn', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: .72rem;
  --text-sm: .85rem;
  --text-base: 1rem;
  --text-md: 1.15rem;
  --text-lg: 1.4rem;
  --text-xl: 1.8rem;
  --text-2xl: 2.4rem;
  --text-3xl: clamp(2.1rem, 7vw, 3.6rem);

  /* فاصله‌گذاری */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-16: 6rem;

  /* گوشه‌ها */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --header-h: 64px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .22s;
  --dur-med: .45s;
}

/* ---------------- پایه ---------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(212, 162, 78, .07), transparent 62%),
    radial-gradient(760px 420px at 12% 108%, rgba(212, 162, 78, .05), transparent 60%),
    var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(212, 162, 78, .32); color: #fff; }

:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 3px; border-radius: 2px; }

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

button { font-family: inherit; cursor: pointer; }

a { color: var(--accent-amber); text-decoration: none; }

h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 800; }
p { margin: 0; }

/* فقط برای متن‌های لاتین (مونو-لیبل‌ها) — هرگز روی متن فارسی */
.mono {
  font-family: var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------------- لایه‌های پس‌زمینه ---------------- */
.bg-dust {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -60%;
  z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .05;
  mix-blend-mode: overlay;
}

@media (min-width: 768px) {
  .grain { animation: grainShift 9s steps(6) infinite; }
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-1.5%, 1%); }
  40%  { transform: translate(1%, -1.5%); }
  60%  { transform: translate(-1%, -.5%); }
  80%  { transform: translate(.5%, 1.5%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 61;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, transparent 52%, rgba(0, 0, 0, .52) 100%);
}

/* ---------------- هدر ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: env(safe-area-inset-top) var(--space-5) 0;
  background: rgba(14, 13, 12, .72);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--border-subtle);
}

.header-brand {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.header-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.progress-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.progress-dots { display: flex; gap: 5px; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.dot.is-solved {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  box-shadow: 0 0 8px rgba(212, 162, 78, .55);
}

.dot.is-current {
  border-color: var(--accent-amber);
  animation: dotPulse 2.2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 162, 78, .35); }
  50%      { box-shadow: 0 0 0 5px rgba(212, 162, 78, 0); }
}

.header-status {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--text-muted);
}

/* ---------------- محتوای صفحه ---------------- */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) var(--space-16);
  flex: 1;
}

/* تا وقتی انیمیشن ورود آماده نشده، صفحه پنهان بماند (بدون فلش) */
.js-anim-ready .page { opacity: 0; }

/* ---------------- کارت‌ها ---------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 42%), var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.4rem, 4.5vw, 2.2rem);
}

.card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  width: 52px;
  height: 1px;
  background: var(--accent-amber);
  opacity: .8;
}

.card + .card { margin-top: var(--space-5); }

.card-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: .7rem;
  color: var(--accent-amber);
}

.card-label .mono { letter-spacing: .24em; }

.card-label-fa { color: var(--text-muted); font-weight: 500; }

.location-title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-3);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.meta-chip { font-size: var(--text-sm); color: var(--text-muted); }

.meta-chip::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-amber);
  margin-inline-end: .55em;
  vertical-align: middle;
  opacity: .8;
}

.clue-box {
  border-inline-start: 2px solid var(--border-strong);
  background: rgba(212, 162, 78, .05);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: 2;
}

/* ---------------- دکمه‌ها ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .8rem 1.6rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(1px) scale(.99); }

.btn svg { width: 18px; height: 18px; }

.btn-primary {
  color: var(--accent-amber);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(212, 162, 78, .14), rgba(212, 162, 78, .04));
  box-shadow: var(--shadow-noir);
}

.btn-primary:hover {
  background: linear-gradient(180deg, rgba(212, 162, 78, .22), rgba(212, 162, 78, .07));
  box-shadow: var(--glow-amber);
  transform: translateY(-1px);
}

.btn-ghost { color: var(--text-muted); }

.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* ---------------- ورودی پاسخ ---------------- */
.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.field-row { display: flex; gap: var(--space-3); }

.field-input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: .8rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem; /* ۱۶ پیکسل — جلوگیری از زوم خودکار در آیفون */
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.field-input::placeholder { color: var(--text-faint); }

.field-input:focus {
  outline: none;
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 3px rgba(212, 162, 78, .16), 0 0 24px -6px rgba(212, 162, 78, .4);
}

.field-hint { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-faint); }

.field-error { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--danger); font-weight: 500; }

.field-prompt {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  text-align: center;
}

@media (max-width: 520px) {
  .field-row { flex-direction: column; }
  .btn { width: 100%; }
}

/* ---------------- حالتِ حل‌شده ---------------- */
.answer-solved {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  text-align: center;
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 2px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  color: var(--accent-amber);
  font-size: 1.05rem;
  font-weight: 800;
  padding: .4rem 1.2rem;
  transform: rotate(-6deg);
  box-shadow: 0 0 24px -8px rgba(212, 162, 78, .6);
}

.stamp svg { width: 18px; height: 18px; }

/* ---------------- مهر گوشه‌ی صفحه (موتیف پرونده) ---------------- */
.stamp-seal {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom), 14px);
  left: 14px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(212, 162, 78, .25);
  border: 1px dashed rgba(212, 162, 78, .2);
  border-radius: 3px;
  padding: .5em .8em;
  transform: rotate(-6deg);
  user-select: none;
  pointer-events: none;
}

/* ---------------- دکمه‌ی صدا ---------------- */
.audio-toggle {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom), 16px);
  right: 16px;
  z-index: 70;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(26, 24, 21, .66);
  border: 1px solid var(--border-subtle);
  color: var(--accent-amber);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-noir);
  transition: opacity var(--dur-med), border-color var(--dur-fast), box-shadow var(--dur-fast);
  opacity: 0;
}

body.is-ready .audio-toggle { opacity: 1; }

.audio-toggle:hover { border-color: var(--border-strong); box-shadow: var(--glow-amber-soft); }

.audio-toggle svg { width: 19px; height: 19px; }

.audio-toggle .icon-off { display: none; }

.audio-toggle.is-muted { color: var(--text-faint); opacity: .8; }
.audio-toggle.is-muted .icon-on { display: none; }
.audio-toggle.is-muted .icon-off { display: block; }

/* ---------------- فوتر ---------------- */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-faint);
  padding: 0 var(--space-5) calc(env(safe-area-inset-bottom) + var(--space-6));
}

/* ---------------- اعلان کوچک ---------------- */
.toast {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom), 90px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: rgba(26, 24, 21, .9);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--text-sm);
  padding: .7rem 1.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-noir);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: min(86vw, 420px);
  text-align: center;
}

/* ---------------- اسکرول‌بار ---------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: #2a2620;
  border-radius: 5px;
  border: 2px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover { background: #3a342b; }

/* ---------------- حرکت‌های کمتر ---------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .grain { animation: none; }
}