/* ─────────────────────────────────────────────────────────
   صفحه‌ی انتظار پیش از ورود
   اصل: هیچ‌چیز اینجا نباید ورود را کند کند (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; }

/* ستونِ کناری فقط جای تبلیغِ 300×600 است (D-819)؛ بی آن ستونِ ورود تمام‌عرض */
.lobby-grid { display: grid; grid-template-columns: 1fr 300px; gap: 26px;
  align-items: start; }
.lobby-grid.is-solo { grid-template-columns: 1fr; }

/* ── ستون ورود ── */
.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; }

/* ── جای تبلیغ (D-819): باکسِ ورود 300×600 و باکسِ پایان 300×250 — اندازه‌ها در lobby/slots.py ──
   قابِ ثابت با نسبتِ استاندارد؛ تصویر کلِ قاب را پر می‌کند. باکسِ ورود کنارِ ستون می‌چسبد (sticky) تا با پیمایش
   دیده بماند. مدیر بی تبلیغ جای خالیِ خط‌چین می‌بیند. */
.ad-slot { position: relative; width: 300px; max-width: 100%; margin-inline: auto; overflow: hidden;
  border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-s); }
/* کارفرما: «از بالای آماده‌سازی تا پایینِ پیش از شروع» — هم‌قدِ ستونِ ورود (بلندیِ آن با نوارِ مهلت و راهنما
   عوض می‌شود). رسانه absolute است تا بلندیِ خودِ تصویر ردیف را بلند نکند؛ تصویرِ 300×600 با cover قاب را پر می‌کند */
.ad-entry { align-self: stretch; min-height: 420px; }
.ad-entry > .ad-media, .ad-entry > .ad-fill, .ad-entry > .ad-card { position: absolute; inset: 0; }
.ad-end { aspect-ratio: 300 / 250; margin-block: 0 26px; }
.ad-media { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--night); }
.ad-fill { display: block; width: 100%; height: 100%; }
.ad-tag { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; padding: 1px 8px; border-radius: 99px;
  font-size: .68rem; font-weight: 700; color: #fff; background: rgba(15, 18, 40, .55); pointer-events: none; }
.ad-cta { position: absolute; bottom: 14px; inset-inline: 14px; }
.ad-card { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px 22px; text-align: center; background: linear-gradient(160deg, var(--accent-wash), var(--surface) 70%); }
.ad-card h3 { margin: 0; font-size: 1.08rem; color: var(--ink); }
.ad-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }
.ad-card .poll { text-align: start; }
.ad-slot.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 18px; text-align: center; border: 2px dashed var(--line); background: var(--surface-2); box-shadow: none; }
.ad-slot.is-empty b { color: var(--ink); }
.ad-slot.is-empty span, .ad-slot.is-empty small { color: var(--ink-faint); font-size: .85rem; }

@media (max-width: 900px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .lobby-side { order: 2; }
  /* ستون‌ها زیرِ هم‌اند و «هم‌قد» معنا ندارد — همان نسبتِ استانداردِ 300×600 */
  .ad-entry { aspect-ratio: 300 / 600; min-height: 0; }
}


/* ── نوار مهلت حداقلی (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; }
}