/* ─────────────────────────────────────────────────────────
   صفحه‌ی انتظار پیش از ورود
   اصل: هیچ‌چیز اینجا نباید ورود را کند کند (D-116)
   ───────────────────────────────────────────────────────── */
.lobby { padding-block: 28px 60px; }
.lobby-head { text-align: center; margin-bottom: 26px; }
.lobby-head h1 { font-size: 1.7rem; font-weight: 700; margin: 0; }

.lobby-grid { display: grid; grid-template-columns: 1fr 360px; gap: 26px;
  align-items: start; }

/* ── ستون ورود ── */
.lobby-enter { display: flex; flex-direction: column; gap: 18px; }

.lobby-state { display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 20px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line-soft);
  font-weight: 600; font-size: .96rem; box-shadow: var(--shadow-s); }

.spinner { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: riqx-spin .9s linear infinite; }
@keyframes riqx-spin { to { transform: rotate(360deg); } }

/* ── بررسی دستگاه ── */
.devcheck { background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-m); padding: 4px 20px 18px; box-shadow: var(--shadow-s); }
.devcheck-video { width: 100%; max-height: 260px; border-radius: 12px;
  background: var(--night); margin-top: 14px; object-fit: cover;
  transform: scaleX(-1); }          /* آینه‌ای، مثل هر پیش‌نمای دوربین */
.devcheck-meter { height: 9px; border-radius: 99px; margin-top: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  overflow: hidden; }
.devcheck-meter > span { display: block; height: 100%; width: 0;
  border-radius: 99px; background: linear-gradient(90deg, var(--ok), var(--signal));
  transition: width .08s linear; }
.devcheck-msg { font-size: .86rem; color: var(--ink-soft); line-height: 1.9;
  margin: 12px 0 0; min-height: 1.9em; }

/* ── ستون محتوا ── */
.lobby-side { display: flex; flex-direction: column; gap: 16px; }
.lobby-item { background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-m); padding: 18px 20px; box-shadow: var(--shadow-s); }
.lobby-item h3 { font-size: 1rem; font-weight: 650; margin: 0 0 8px; }
.lobby-body { font-size: .9rem; color: var(--ink-soft); line-height: 1.95;
  margin: 0 0 12px; }
.lobby-img, .lobby-clip { width: 100%; border-radius: 12px; display: block;
  margin-bottom: 12px; }
.lobby-clip { background: var(--night); }

/* ── نظرسنجی ── */
.poll { display: flex; flex-direction: column; gap: 8px; }
.poll-opt { text-align: right; padding: 11px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); font: inherit; font-size: .91rem; cursor: pointer;
  transition: border-color .15s, background .15s; }
.poll-opt:hover { border-color: var(--accent); }
.poll-opt.on { background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600; }
.poll-thanks { font-size: .84rem; color: var(--ok); margin: 10px 0 0; }

@media (max-width: 900px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .lobby-side { order: 2; }
}


/* ── نوار مهلت حداقلی (D-535) ──────────────────────────────────────
   انتظارِ بی‌نشانه بلندتر حس می‌شود از انتظارِ دیدنی. این نوار
   نمی‌گوید «صبر کن»، می‌گوید «دارد پیش می‌رود» — و همان چند ثانیه‌ای
   است که تبلیغ صفحه دیده می‌شود.

   عرض را جاوااسکریپت می‌نویسد، نه انیمیشن CSS: مانده‌ی مهلت در هر
   استعلام از سرور تازه می‌شود و انیمیشنِ از پیش تعیین‌شده با آن
   واگرا می‌شد. */
.lobby-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
  margin: 2px 0 14px;
}
.lobby-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .9s linear;
}
@media (prefers-reduced-motion: reduce) {
  .lobby-bar > i { transition: none; }
}