/* ============================================================
   مخلوط للمسابقات — v2 / الطبقة الثانية
   عناصر صفحة المسابقة والعجلة. انفصلت عن app.css
   عشان حد 400 سطر للملف. تُحمَّل بعد app.css مباشرة.
   ============================================================ */

/* ---------- الهيرو ---------- */
.chero{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(14px,3vw,24px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(16px,3vw,24px);box-shadow:var(--shadow-sm);
}
.chero__art{
  display:grid;place-items:center;aspect-ratio:1;border-radius:16px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 26%,var(--surface)),var(--surface));
  border:1px solid var(--line);
}
.chero__art span{font-size:clamp(44px,9vw,62px);line-height:1}
.chero__body h1{font-size:clamp(20px,4.2vw,31px);margin:11px 0 8px}
.chero__body>p{color:var(--text-2);font-size:14.5px}
.chero__stats{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;
}
.chero__stats li{
  display:flex;flex-direction:column;flex:1 1 92px;
  padding:9px 13px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
}
.chero__stats b{font-size:17px;font-variant-numeric:tabular-nums}
.chero__stats span{font-size:11.5px;color:var(--text-2)}

/* ---------- العد التنازلي ---------- */
.cdown{
  margin-top:14px;padding:16px;border-radius:18px;text-align:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 20%,var(--surface)),var(--surface));
  border:1px solid var(--line);
}
.cdown__lbl{font-size:13px;font-weight:800;color:var(--text-2);margin-bottom:12px}
.cdown__row{display:flex;justify-content:center;gap:8px}
.cdown__u{
  min-width:66px;padding:9px 6px;border-radius:13px;
  background:var(--surface);border:1px solid var(--line);
}
.cdown__u b{
  display:block;font-size:clamp(20px,4.4vw,27px);font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.cdown__u span{font-size:11px;color:var(--text-2)}
.cdown--over .cdown__u b{color:var(--text-2)}

/* ---------- الشبكة ---------- */
.cgrid{display:grid;grid-template-columns:1fr 330px;gap:14px;margin-top:14px;align-items:start}
.cgrid__main{display:flex;flex-direction:column;gap:14px;min-width:0}
.cgrid__side{position:sticky;top:76px;display:flex;flex-direction:column;gap:14px}

/* ---------- الصناديق ---------- */
.cbox{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.cbox__hd{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;font-size:15.5px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.cbox__count{
  margin-inline-start:auto;padding:3px 10px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text-2);
}
.cbox__body{padding:16px}
.cbox__note{margin-top:10px;font-size:12px;color:var(--text-2);text-align:center}
.cbox--join .cbox__hd{
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 20%,var(--surface)),var(--surface-2));
}

/* ---------- الشروط ---------- */
.rules{display:flex;flex-direction:column;gap:9px}
.rules li{
  position:relative;padding-inline-start:22px;font-size:14.5px;color:var(--text-2);
}
.rules li::before{
  content:'';position:absolute;inset-inline-start:0;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:var(--brand-2);
}

/* ---------- قوائم المشاركين والفائزين ---------- */
.plist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.prow{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:9px 11px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);
}
.prow__av{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));
}
.prow__in{min-width:0;flex:1}
.prow__in b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow__in span{display:block;font-size:11.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow--win{
  background:color-mix(in srgb,var(--gold) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--gold) 40%,transparent);
}
.plist+.btn{margin-top:12px}

/* ---------- الجائزة ---------- */
.prize{text-align:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.prize__art{
  display:grid;place-items:center;width:104px;height:104px;margin:0 auto 12px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--gold) 35%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  box-shadow:0 6px 20px color-mix(in srgb,var(--gold) 26%,transparent);
}
.prize__art span{font-size:46px;line-height:1}
.prize__name{display:block;font-size:16px;margin-bottom:5px}
.prize__for{font-size:13px;color:var(--text-2)}

.kv{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.kv div{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.kv dt{color:var(--text-2)}
.kv dd{margin:0;font-weight:700}

/* ---------- حالات الاشتراك ---------- */
.jstate{display:flex;flex-direction:column;gap:12px}
.jstate__msg{font-size:14.5px;color:var(--text-2)}
.jstate__msg b{color:var(--text)}
.alert{
  display:block;padding:11px 14px;border-radius:12px;font-size:13.5px;font-weight:700;
}
.alert--ok{
  background:color-mix(in srgb,var(--green) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent);color:var(--green);
}
.alert--err{
  background:color-mix(in srgb,#e11d48 14%,transparent);
  border:1px solid color-mix(in srgb,#e11d48 40%,transparent);color:#e11d48;
}
.alert--warn{
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);color:#a86c05;
}
[data-theme="dark"] .alert--warn{color:var(--gold-2)}

/* ---------- شريط الاشتراك الثابت ---------- */
.stickycta{
  position:fixed;inset-inline:0;bottom:0;z-index:90;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}

/* ---------- المودال ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal__bd{position:absolute;inset:0;background:rgba(10,4,24,.68);backdrop-filter:blur(3px)}
.modal__dlg{
  position:relative;width:100%;max-width:400px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:26px 22px 20px;box-shadow:0 22px 60px rgba(0,0,0,.4);
  animation:pop .32s cubic-bezier(.16,1,.3,1);
  max-height:90vh;overflow-y:auto;
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:11px;inset-inline-start:11px;
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);cursor:pointer;
}
.modal__x svg{width:16px;height:16px}
.modal__ico{font-size:40px;line-height:1;display:block;margin-bottom:8px}
.modal__dlg h2{font-size:19px;margin-bottom:6px}
.modal__sub{color:var(--text-2);font-size:14px;margin-bottom:18px}
.modal__note{margin-top:11px;font-size:11.5px;color:var(--text-2)}

/* ---------- الحقول ---------- */
.field{display:block;text-align:start;margin-bottom:14px}
.field__lbl{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.field__wrap{
  display:flex;align-items:center;gap:0;
  border:1.5px solid var(--line);border-radius:12px;background:var(--surface-2);
  overflow:hidden;transition:border-color .18s ease;
}
.field__wrap:focus-within{border-color:var(--gold)}
.field__at{
  padding:0 12px;font-weight:800;color:var(--text-2);
  border-inline-end:1px solid var(--line);align-self:stretch;display:grid;place-items:center;
}
.field__in{
  flex:1;min-width:0;padding:12px 13px;border:0;background:transparent;
  color:var(--text);font:inherit;font-size:15px;outline:none;
  direction:ltr;text-align:left;
}
.field__hint{display:block;margin-top:6px;font-size:11.5px;color:var(--text-2)}

.verify{
  display:flex;align-items:center;gap:9px;margin-bottom:12px;
  padding:10px 13px;border-radius:12px;font-size:13px;font-weight:700;
  background:color-mix(in srgb,var(--brand) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);
  color:var(--brand-2);
}
.verify__spin{
  width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--brand) 30%,transparent);
  border-top-color:var(--brand-2);animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- تجاوب صفحة المسابقة ---------- */
@media (max-width:900px){
  .cgrid{grid-template-columns:1fr}
  .cgrid__side{position:static;order:-1}
}
@media (max-width:600px){
  .chero{grid-template-columns:1fr;text-align:center}
  .chero__art{width:104px;margin:0 auto}
  .chero__stats li{flex:1 1 calc(33% - 8px)}
  .cdown__u{min-width:0;flex:1}
  .plist{grid-template-columns:1fr}
  .cbox--join{display:none}
}

/* ============================================================
   الأفاتار في الواجهة العامة
   الصورة فوق وحرف الاسم بديل لو فشلت. المصدر /avatar-v2/{id}
   ============================================================ */
.chip__av{position:relative;overflow:hidden}
.chip__av img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:var(--surface-2);
}
.chip__av i{font-style:normal;user-select:none}

/* شريحة الرصيد في الهيدر */
.chip--wal{gap:9px;padding:0 11px}
.chip--wal .wal{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.chip--wal .wal svg{width:14px;height:14px;stroke-width:2.4}
.chip--wal .wal--c{color:var(--gold)}
.chip--wal .wal--s{color:var(--brand-2)}
.chip--wal .wal + .wal{
  padding-inline-start:9px;
  border-inline-start:1px solid var(--line);
}

/* أفاتار داخل شريط الفائزين */
.tk__av{
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;
  width:20px;height:20px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.16);color:#fff;
  font-size:9px;font-weight:800;line-height:1;
}
.tk__av img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.tk__av i{font-style:normal}

@media (max-width:720px){
  .chip--wal{display:none}
}