/* =====================================================================
   GameVerse — کپچای ریاضی
   ---------------------------------------------------------------------
   یک قطعه، دو پوسته: سایت (متغیرهای --gv-) و پنل مدیریت (--ga-).
   هر رنگ اول سراغ متغیر پنل می‌رود و اگر تعریف نشده بود (یعنی صفحه‌ای
   از خود سایت است) به متغیر سایت برمی‌گردد. نتیجه‌اش این است که در
   تم روشن پنل هم درست دیده می‌شود، بدون اینکه دو فایل css بنویسیم.
   ===================================================================== */

.gv-captcha {
  --cap-surface: var(--ga-surface-3, var(--gv-surface-3, #193026));
  --cap-surface-2: var(--ga-surface-2, var(--gv-surface-2, #12241D));
  --cap-border: var(--ga-border, var(--gv-border, rgba(255, 255, 255, .07)));
  --cap-border-2: var(--ga-border-2, var(--gv-border-strong, rgba(255, 255, 255, .13)));
  --cap-text: var(--ga-text, var(--gv-text, #E7F4EE));
  --cap-muted: var(--ga-muted, var(--gv-muted, #7B9488));
  --cap-brand: var(--ga-brand, var(--gv-primary, #10B981));
  --cap-success: var(--ga-success, var(--gv-success, #4ADE80));
  --cap-danger: var(--ga-danger, var(--gv-danger, #F43F5E));

  /* راست‌چین صریح: این قطعه داخل مودال و پنل هم می‌نشیند و نباید به
     جهتِ ظرفِ بالادست وابسته باشد. */
  direction: rtl;
  text-align: start;
  margin-block-end: 16px;
}

.gv-captcha__label {
  display: block;
  margin-block-end: 8px;
  color: var(--cap-muted);
  font-size: .8125rem;
  font-weight: 600;
}

.gv-captcha__label i { color: var(--cap-brand); }

.gv-captcha__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* تصویر سوال — عددها فقط اینجا هستند، نه در متن صفحه.
   انتخاب و کشیدنش هم بسته است تا کپی‌کردن ساده نباشد. */
.gv-captcha__image {
  flex: none;
  display: block;
  width: 168px;
  height: 52px;
  border: 1px solid var(--cap-border-2);
  border-radius: 10px;
  background: var(--cap-surface-2);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.gv-captcha__input {
  flex: 1;
  min-width: 64px;
  padding: 10px 14px;
  border: 1px solid var(--cap-border);
  border-radius: 10px;
  background: var(--cap-surface);
  color: var(--cap-text);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  /* پاسخ عدد است؛ با جهت چپ‌به‌راست، مکان‌نما سر جای درست می‌ماند */
  direction: ltr;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.gv-captcha__input:focus {
  outline: none;
  border-color: var(--cap-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cap-brand) 22%, transparent);
}

.gv-captcha__reload {
  flex: none;
  width: 42px;
  border: 1px solid var(--cap-border);
  border-radius: 10px;
  background: var(--cap-surface-2);
  color: var(--cap-muted);
  cursor: pointer;
  transition: color .16s ease, transform .3s ease;
}

.gv-captcha__reload:hover {
  color: var(--cap-brand);
  transform: rotate(-180deg);
}

.gv-captcha__state {
  display: block;
  margin-block-start: 7px;
  min-height: 18px;
  color: var(--cap-muted);
  font-size: .75rem;
}

.gv-captcha__state[data-state="ok"] { color: var(--cap-success); }
.gv-captcha__state[data-state="bad"] { color: var(--cap-danger); }

/* حاشیه اینپوت هم‌رنگ وضعیت می‌شود — بازخورد بدون خواندن متن.

   وضعیت روی خود ویجت می‌نشیند (captcha.js آن را از نوار وضعیت کپی
   می‌کند) نه با :has()؛ چون :has() در بعضی موتورهای رندر فقط در
   querySelector کار می‌کند و در اعمال استایل بی‌صدا نادیده گرفته
   می‌شود — یعنی خرابی‌اش هم دیده نمی‌شود. */
.gv-captcha[data-state="ok"] .gv-captcha__input {
  border-color: var(--cap-success);
}

.gv-captcha[data-state="bad"] .gv-captcha__input {
  border-color: var(--cap-danger);
}

/* روی موبایل، تصویر و اینپوت دو سطر می‌شوند تا هیچ‌کدام له نشود */
@media (max-width: 420px) {
  .gv-captcha__row { flex-wrap: wrap; }
  .gv-captcha__image { width: 100%; height: auto; aspect-ratio: 168 / 52; }
  .gv-captcha__input { flex: 1 1 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .gv-captcha__reload:hover { transform: none; }
}