/* ============================================================
   صفحة المسابقة — الاتجاه ب
   عمود واحد · فعل واحد · نص أقل · عناصر أكبر
   يعتمد على متغيرات وأزرار app.css
   ============================================================ */

/* عمود واحد في النص، مقاس مريح للقراءة على أي جهاز */
.col{
  width:100%;max-width:620px;margin:0 auto;
  padding:clamp(14px,3vw,20px) clamp(14px,4vw,20px) clamp(28px,6vw,44px);
  display:flex;flex-direction:column;gap:12px;
}

/* ---------- 1. الجائزة ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:26px;
  padding:clamp(22px,5vw,32px) 20px clamp(20px,4vw,26px);
  box-shadow:var(--shadow);
}
.hero__glow{
  position:absolute;top:-46%;left:50%;transform:translateX(-50%);
  width:min(420px,120%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 26%,transparent) 0%,transparent 68%);
}
.hero__tag{
  position:relative;display:inline-block;
  padding:5px 14px;border-radius:999px;margin-bottom:14px;
  background:color-mix(in srgb,var(--brand) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);
  color:var(--brand-2);font-size:12px;font-weight:800;
}
.hero__art{
  position:relative;display:grid;place-items:center;
  width:clamp(108px,26vw,132px);aspect-ratio:1;margin:0 auto 16px;
  border-radius:50%;font-size:clamp(52px,12vw,64px);line-height:1;
  background:radial-gradient(circle at 34% 28%,
    color-mix(in srgb,var(--gold) 30%,var(--surface)),var(--surface));
  border:2px solid color-mix(in srgb,var(--gold) 42%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--gold) 24%,transparent);
}
.hero h1{
  position:relative;font-size:clamp(24px,6vw,34px);line-height:1.25;margin-bottom:8px;
}
.hero__sub{position:relative;color:var(--text-2);font-size:clamp(14px,3vw,15.5px)}

/* ---------- 2. الوقت ---------- */
.clock{
  text-align:center;padding:15px 16px;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);
}
.clock__lbl{display:block;font-size:12.5px;font-weight:800;color:var(--text-2);margin-bottom:9px}
.clock__row{
  display:flex;align-items:baseline;justify-content:center;gap:4px;
  font-variant-numeric:tabular-nums;
}
.clock__row b{
  font-size:clamp(26px,7vw,34px);font-weight:800;line-height:1;
  min-width:1.6em;
}
.clock__row i{
  font-style:normal;font-size:12px;font-weight:700;color:var(--text-2);
  margin-inline-end:9px;
}
.clock__row i:last-child{margin-inline-end:0}
.cdown--over b{color:var(--text-2)}

/* ---------- 3. الفعل الواحد ---------- */
.act{display:flex;flex-direction:column;gap:10px}
.act .jstate{display:flex;flex-direction:column;gap:10px}
.act .jstate__msg{
  text-align:center;font-size:14px;color:var(--text-2);
}
.act .jstate__msg b{color:var(--text)}
/* الزر الأساسي ضخم وواضح لكل الفئات */
.act .btn--gold,.act .btn--ghost{
  padding:18px 24px;border-radius:18px;font-size:17.5px;
}
.act .btn--gold{box-shadow:0 8px 24px rgba(245,166,35,.4)}
.btn--big{padding:17px 24px;font-size:17px;border-radius:16px}

/* ---------- 4. المشتركون ---------- */
.ppl{
  padding:14px 16px;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);
}
.ppl__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ppl__top h2{font-size:14.5px;color:var(--text-2);font-weight:700}
.ppl__top b{font-size:19px;font-variant-numeric:tabular-nums}

/* الصور متراكبة — خفيفة جدًا وشكلها عصري */
.ppl__strip{
  display:flex;flex-wrap:wrap;gap:0;margin-top:12px;
  padding-inline-start:9px;
}
.ppl__strip .prow{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  margin-inline-start:-9px;
  border:2.5px solid var(--surface);
  background:linear-gradient(140deg,var(--brand-2),var(--brand));
  color:#fff;font-weight:800;font-size:14px;
  overflow:hidden;
}
/* نخفي التفاصيل النصية ونسيب أول حرف بس */
.ppl__strip .prow__in{display:none}
.ppl__strip .prow__av{
  width:100%;height:100%;border-radius:0;background:none;font-size:14px;
}
.ppl__strip .prow--win{background:linear-gradient(140deg,var(--gold-2),var(--gold));color:#3a2400}
.ppl__strip .badge{display:none}

.ppl__more{
  width:100%;margin-top:12px;padding:11px;border-radius:13px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:13.5px;font-weight:800;color:var(--text-2);
}
.ppl__more:hover:not(:disabled){border-color:var(--brand);color:var(--text)}
.ppl__more:disabled{opacity:.55;cursor:default}
.ppl__note{margin-top:8px;font-size:11.5px;color:var(--text-2);text-align:center}

/* ---------- 5. الفائزون ---------- */
.won{
  padding:14px 16px;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);
}
.won h2{font-size:14.5px;margin-bottom:11px}
.won .prow{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--gold) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 38%,transparent);
}
.won .prow__av{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:15px;color:#3a2400;
  background:linear-gradient(140deg,var(--gold-2),var(--gold));
}
.won .prow__in{min-width:0;flex:1}
.won .prow__in b{display:block;font-size:14px}
.won .prow__in span{display:block;font-size:12px;color:var(--text-2)}
.won .badge{
  padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;
  background:color-mix(in srgb,var(--gold) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  color:#a86c05;
}
[data-theme="dark"] .won .badge{color:var(--gold-2)}
.won .jstate__msg{font-size:13.5px;color:var(--text-2)}

/* ---------- 6. التفاصيل مطويّة (بدون JS) ---------- */
.acc{
  border-radius:20px;background:var(--surface);border:1px solid var(--line);
  overflow:hidden;
}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;cursor:pointer;font-size:14.5px;font-weight:800;
  list-style:none;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{width:18px;height:18px;transition:transform .22s ease;color:var(--text-2)}
.acc[open] summary svg{transform:rotate(180deg)}
.acc[open] summary{border-bottom:1px solid var(--line)}
.acc__body{padding:15px 16px}
.acc__list{display:flex;flex-direction:column;gap:9px}
.acc__list li{
  position:relative;padding-inline-start:20px;font-size:14px;color:var(--text-2);
}
.acc__list li::before{
  content:'';position:absolute;inset-inline-start:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--brand-2);
}
.acc__kv{
  margin-top:15px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.acc__kv div{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.acc__kv dt{color:var(--text-2)}
.acc__kv dd{margin:0;font-weight:700}

/* ---------- المودال: أكبر وأودّ ---------- */
.cb .modal__dlg{max-width:380px;border-radius:24px;padding:28px 22px 22px}
.cb .modal__ico{font-size:46px}
.cb .modal__dlg h2{font-size:21px}
.cb .field__in{padding:15px 14px;font-size:16px;text-align:center;direction:ltr}
.cb .field__at{font-size:16px}
.cb .field__wrap{border-radius:14px;border-width:2px}
.cb .field__hint{text-align:center}

/* ---------- تجاوب ---------- */
@media (max-width:420px){
  .col{gap:10px}
  .clock__row b{min-width:1.5em}
  .ppl__strip .prow{width:34px;height:34px}
}

/* ============================================================
   غلاف المسابقة (cover_image)
   بانر أعلى الكارت + دائرة الجائزة متراكبة على حدّه السفلي.
   لو مفيش غلاف، نشيل كلاس hero--cover والكارت يرجع لشكله الأصلي.
   ============================================================ */
.hero--cover{padding-top:0}

.hero__cover{
  position:relative;
  margin:-1px -1px 0;              /* يلبس على حدود الكارت */
  border-radius:26px 26px 0 0;
  overflow:hidden;
  background:var(--surface-2);
  line-height:0;
}
.hero__cover img{
  width:100%;height:auto;
  aspect-ratio:12/5;               /* يمنع أي قفزة تخطيط أثناء التحميل */
  object-fit:cover;
  display:block;
}
/* تدرج سفلي يضمن قراءة العنوان فوق أي صورة */
.hero__cover::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,0) 38%,
    color-mix(in srgb,var(--surface) 88%,transparent) 100%);
}
.hero--cover .hero__tag{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  margin:0;
  background:rgba(10,4,24,.55);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* دائرة الجائزة تطلع فوق حدّ الغلاف */
.hero--cover .hero__art{
  position:relative;z-index:2;
  margin-top:clamp(-56px,-11vw,-44px);
  margin-bottom:14px;
  border-width:4px;
  border-color:var(--surface);
  background:radial-gradient(circle at 34% 28%,
    color-mix(in srgb,var(--gold) 34%,var(--surface)),var(--surface));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.hero--cover .hero__glow{top:18%;opacity:.55}
.hero--cover h1,.hero--cover .hero__sub{padding-inline:20px}
.hero--cover .hero__sub{padding-bottom:2px}

/* بدون غلاف */
.hero:not(.hero--cover) .hero__cover{display:none}

/* ============================================================
   صورة الجائزة داخل الدائرة (prize_image)
   الافتراضي: الصورة. لو مفيش صورة → كلاس hero__art--fb ويظهر الإيموجي.
   ============================================================ */
.hero__art{overflow:hidden;position:relative}
.hero__art img{
  width:82%;height:82%;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.hero__art .hero__fb{display:none;font-size:inherit;line-height:1}

/* حالة عدم وجود صورة */
.hero__art--fb img{display:none}
.hero__art--fb .hero__fb{display:block}

/* ============================================================
   بطاقة الحساب المصغّرة داخل مودال تأكيد الاشتراك
   ============================================================ */
.acct--mini{
  display:flex;align-items:center;gap:12px;text-align:start;
  padding:12px;border-radius:15px;margin-bottom:12px;
  background:var(--surface-2);border:1px solid var(--line);
}
.acct--mini .acct__av{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;
}
.acct--mini .acct__av img{width:100%;height:100%;object-fit:cover}
.acct--mini .acct__in{min-width:0;flex:1}
.acct--mini .acct__in b{display:block;font-size:15px}
.acct--mini .acct__in span{
  display:block;font-size:12.5px;color:var(--text-2);
  direction:ltr;text-align:start;
}
.modal__hint{
  font-size:12.5px;color:var(--text-2);text-align:center;margin-bottom:14px;
}

/* ============================================================
   تسلسل التحقق بعد الضغط على الاشتراك
   خطوات متتابعة + شريط تقدم + علامات صح، وشاشة نجاح بعلامة مرسومة.
   مشتركة بين صفحة المسابقة وصفحة العجلة.
   ============================================================ */
.vseq{text-align:start;animation:vIn .3s ease}
@keyframes vIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* شريط التقدم */
.vbar{
  height:6px;border-radius:999px;overflow:hidden;margin-bottom:16px;
  background:var(--surface-2);border:1px solid var(--line);
}
.vbar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--green));
  transition:width .45s cubic-bezier(.16,1,.3,1);
}

/* الخطوات */
.vsteps{display:flex;flex-direction:column;gap:9px}
.vstep{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:13.5px;color:var(--text-2);
  opacity:.5;transition:opacity .3s ease,border-color .3s ease,background .3s ease;
}
.vstep--on{
  opacity:1;color:var(--text);font-weight:700;
  border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,var(--surface));
}
.vstep--ok{
  opacity:1;color:var(--text);
  border-color:color-mix(in srgb,var(--green) 40%,transparent);
  background:color-mix(in srgb,var(--green) 8%,var(--surface));
}

/* أيقونة الخطوة */
.vstep__ic{
  flex:0 0 auto;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line);
}
.vstep--on .vstep__ic{
  border-color:transparent;
  border-top-color:var(--brand-2);
  border-inline-start-color:var(--brand-2);
  animation:vSpin .65s linear infinite;
}
.vstep--ok .vstep__ic{
  background:var(--green);border-color:var(--green);
  animation:vPop .28s cubic-bezier(.16,1,.3,1);
}
.vstep__ic svg{width:13px;height:13px;stroke:#fff;stroke-width:3.2;display:none}
.vstep--ok .vstep__ic svg{display:block}
@keyframes vSpin{to{transform:rotate(360deg)}}
@keyframes vPop{0%{transform:scale(.3)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ملاحظة الأمان */
.vsafe{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:14px;font-size:11.5px;color:var(--text-2);
}
.vsafe svg{width:14px;height:14px;color:var(--green)}

/* ---------- شاشة النجاح ---------- */
.vok{text-align:center;animation:vIn .3s ease}
.vok__ring{
  width:76px;height:76px;margin:0 auto 14px;display:block;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.vok__ring circle{
  stroke:var(--green);stroke-width:3;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:vDraw .6s cubic-bezier(.16,1,.3,1) forwards;
}
.vok__ring path{
  stroke:var(--green);stroke-width:4;
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:vDraw .4s cubic-bezier(.16,1,.3,1) .5s forwards;
}
@keyframes vDraw{to{stroke-dashoffset:0}}

.vok h3{font-size:19px;margin-bottom:6px}
.vok__sub{font-size:13.5px;color:var(--text-2);margin-bottom:14px}
.vok__no{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;margin-bottom:6px;
  background:color-mix(in srgb,var(--gold) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  animation:vPop .4s cubic-bezier(.16,1,.3,1) .7s both;
}
.vok__no span{font-size:11.5px;color:var(--text-2);font-weight:700}
.vok__no b{
  font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums;
  direction:ltr;
}
.vok__keep{display:block;font-size:11.5px;color:var(--text-2);margin-bottom:16px}

@media (prefers-reduced-motion:reduce){
  .vstep--on .vstep__ic{animation:none}
  .vok__ring circle,.vok__ring path{animation:none;stroke-dashoffset:0}
  .vok__no,.vstep--ok .vstep__ic{animation:none}
}