/* ============ الانضمام بكود + الحالات ============ */
.jg { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px; scrollbar-width: none; }
.jg::-webkit-scrollbar { display: none; }
.jg__head { text-align: center; padding: 6px 0 18px; }
.jg__head h1 { font-family: var(--font-display); font-size: 23px; font-weight: 700; }
.jg__head p { font-size: 12px; color: var(--text-muted); margin-top: 7px; line-height: 1.7; }
.jg__hint { font-size: 10.5px; color: var(--text-muted); text-align: center; margin-top: 10px; }
.jg__err {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px;
  border-radius: 12px; background: rgba(255,107,122,.1); border: 1px solid rgba(255,107,122,.3);
  color: var(--coral-400); font-size: 11.5px; font-weight: 600; line-height: 1.6;
  animation: errIn 220ms var(--ease) both;
}
.jg__err i { font-size: 15px; margin-top: 1px; flex: none; }
@keyframes errIn { from { opacity: 0; transform: translateY(-4px) } }
.code-boxes--err .code-box { border-color: rgba(255,107,122,.55); color: var(--coral-400); background: rgba(255,107,122,.07); }
.code-boxes--err { animation: codeShake 380ms var(--ease); }
@keyframes codeShake {
  0%,100% { transform: translateX(0) } 20% { transform: translateX(-5px) }
  40% { transform: translateX(5px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(3px) }
}
.jg__acts { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.jg__demo { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.jg__demo button {
  font-size: 10.5px; font-weight: 600; height: 28px; padding: 0 10px; border-radius: var(--r-full);
  background: var(--glass); border: 1px solid var(--line); color: var(--text-2);
}
.jg__cta { position: sticky; bottom: 0; padding: 12px 0 6px;
  background: linear-gradient(180deg, transparent, rgba(7,11,20,.94) 40%); }

/* — شريط/بطاقة حالة — */
.statebar {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 13px;
  background: rgba(228,176,74,.1); border: 1px solid rgba(228,176,74,.28);
  color: var(--gold-400); font-size: 11.5px; font-weight: 600;
}
.statebar--coral { background: rgba(255,107,122,.1); border-color: rgba(255,107,122,.3); color: var(--coral-400); }
.statebar--violet { background: rgba(169,139,255,.12); border-color: rgba(169,139,255,.3); color: var(--violet-400); }
.spin { width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.18); border-top-color: currentColor;
  animation: spin 700ms linear infinite; }

/* — معرض الحالات — */
.st { padding: 0 18px 16px; }
.st__card { margin-bottom: 14px; }
.st__lab { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 7px; }
.st__frame {
  border-radius: 18px; padding: 14px; background: var(--ink-850);
  border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.st__frame--dim { background: rgba(5,8,15,.6); }
/* ============ مستوى مصلح ============ */
.aih {
  display: flex; align-items: center; gap: 12px; padding: 15px;
  border-radius: 20px; margin-bottom: 14px;
  background: radial-gradient(200px 130px at 88% 0%, rgba(169,139,255,.28), transparent 72%), var(--ink-700);
  border: 1px solid rgba(169,139,255,.3);
}
.aih__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aih__txt b { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.aih__txt span { font-size: 10.5px; color: var(--text-muted); line-height: 1.6; }
.aih__chip {
  align-self: flex-start; margin-top: 3px; font-size: 9.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px; background: rgba(169,139,255,.16); color: var(--violet-400);
}

.lv {
  width: 100%; text-align: start; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 16px; margin-bottom: 8px;
  background: var(--glass); border: 1px solid var(--line);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.lv:active { transform: scale(.99); }
.lv.is-on { border-color: rgba(228,176,74,.5); background: rgba(228,176,74,.07);
  box-shadow: 0 0 0 3px rgba(228,176,74,.08); }
.lv__top { display: flex; align-items: center; gap: 9px; }
.lv__ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--glass-2); color: var(--gold-400); font-size: 16px; flex: none; }
.lv.is-on .lv__ico { background: rgba(228,176,74,.16); }
.lv__names { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.lv__names b { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; }
.lv__names span { font-size: 9.5px; color: var(--text-muted); background: var(--glass-2);
  padding: 2px 6px; border-radius: 6px; }
.lv__radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; color: var(--ink-900); font-size: 12px; flex: none; }
.lv.is-on .lv__radio { background: var(--gold-500); border-color: var(--gold-500); }
.lv__mets { display: flex; gap: 6px; }
.lv__met { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px;
  border-radius: 9px; background: rgba(255,255,255,.035); }
.lv__met b { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; }
.lv__met span { font-size: 8.5px; color: var(--text-muted); }
.lv__beh { font-size: 10.5px; color: var(--text-2); line-height: 1.6; }
.lv__tone { font-size: 10px; color: var(--violet-400); line-height: 1.5; }

.aitable { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.aitable__row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 10.5px; }
.aitable__row + .aitable__row { border-top: 1px solid rgba(255,255,255,.045); }
.aitable__row span:first-child { color: var(--text-muted); width: 78px; flex: none; }
.aitable__row b { flex: 1; font-weight: 600; }
/* ============ المتصدرون ============ */
.lbx { padding: 0 18px 16px; }
.lbx__title { font-family: var(--font-display); font-size: 25px; font-weight: 700; }
.lbx__sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.lbx__podium { margin: 18px 0 14px; }

.lbx__me {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(228,176,74,.16), rgba(228,176,74,.03));
  border: 1px solid rgba(228,176,74,.34); margin-bottom: 12px;
}
.lbx__me b { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--gold-400); }
.lbx__me .lbx__rk { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gold-400); }
.lbx__me .lbx__rk small { font-family: var(--font-body); font-size: 9px; color: var(--text-muted); display: block; }
.lbx__me .lbx__who { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lbx__me .lbx__who span { font-size: 10px; color: var(--text-muted); }

.scrow {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--line); margin-bottom: 6px;
}
.scrow--me { background: rgba(228,176,74,.08); border-color: rgba(228,176,74,.28); }
.scrow__rk { width: 20px; text-align: center; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; color: var(--text-muted); flex: none; }
.scrow__who { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.scrow__who b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrow__who span { font-size: 9.5px; color: var(--text-muted); }
.scrow__pts { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.scrow__pts b { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.scrow__d { font-size: 9px; font-weight: 600; }
.scrow__d--up { color: var(--mint-400); }
.scrow__d--down { color: var(--coral-400); }
.scrow__d--flat { color: var(--text-muted); }

/* ============ سجل المباريات ============ */
.hs { padding: 0 18px 16px; }
.hs__sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 14px; }
.hs__box { padding: 11px 8px; border-radius: 14px; background: var(--glass);
  border: 1px solid var(--line); text-align: center; }
.hs__box b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.hs__box span { font-size: 9.5px; color: var(--text-muted); }
.hs__filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.hs__filters::-webkit-scrollbar { display: none; }
.hs__filters button {
  flex: none; height: 30px; padding: 0 12px; border-radius: var(--r-full);
  background: var(--glass); border: 1px solid var(--line); color: var(--text-2);
  font-size: 11px; font-weight: 600;
}
.hs__filters button.is-on { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
.hs__date { font-size: 10.5px; font-weight: 600; color: var(--text-muted); margin: 8px 0 7px; }
.hrow {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line); margin-bottom: 7px; width: 100%; text-align: start;
}
.hrow:active { background: var(--glass-2); }
.hrow__place { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; flex: none; }
.hrow__place--1 { background: rgba(228,176,74,.16); color: var(--gold-400); }
.hrow__place--2 { background: rgba(199,206,220,.12); color: var(--text-2); }
.hrow__place--3 { background: rgba(196,124,74,.16); color: #D89660; }
.hrow__place--n { background: var(--glass-2); color: var(--text-muted); }
.hrow__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hrow__txt b { font-size: 12.5px; font-weight: 600; }
.hrow__txt span { font-size: 10px; color: var(--text-muted); }
.hrow__pts { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.hrow__pts b { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.hrow__pts span { font-size: 9px; color: var(--text-muted); }
/* ============ الحساب والإعدادات ============ */
.me { padding: 0 18px 18px; }
.me__card {
  position: relative; padding: 16px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(220px 140px at 88% 0%, rgba(228,176,74,.24), transparent 72%), var(--ink-700);
  border: 1px solid var(--line-strong);
}
.me__top { display: flex; align-items: center; gap: 13px; }
.me__ava { position: relative; flex: none; }
.me__lvl {
  position: absolute; bottom: -5px; inset-inline-start: -5px; height: 19px; min-width: 19px;
  padding: 0 5px; border-radius: 7px; display: grid; place-items: center;
  background: var(--gold-500); color: #241703; font-family: var(--font-display);
  font-size: 10px; font-weight: 700; border: 2px solid var(--ink-700);
}
.me__names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me__names b { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.me__names span { font-size: 10.5px; color: var(--text-muted); }
.me__edit { flex: none; }
.me__xp { margin-top: 13px; }
.me__xprow { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--text-muted); margin-bottom: 5px; }
.me__xpbar { height: 6px; border-radius: 9px; background: var(--ink-500); overflow: hidden; }
.me__xpbar i { display: block; height: 100%; border-radius: 9px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.me__ach { display: flex; gap: 6px; margin-top: 13px; flex-wrap: wrap; }
.me__ach span { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border-radius: var(--r-full); background: rgba(255,255,255,.06); font-size: 9.5px; color: var(--text-2); }
.me__ach i { font-size: 12px; color: var(--gold-400); }

.me__grp { margin-top: 16px; }
.me__gt { font-size: 10.5px; font-weight: 600; color: var(--text-muted); padding: 0 4px 7px; }
.me__row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 11px 12px; border-radius: 13px; background: var(--glass); border: 1px solid var(--line);
  margin-bottom: 6px;
}
.me__row:active { background: var(--glass-2); }
.me__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--glass-2); color: var(--gold-400); font-size: 14.5px; flex: none; }
.me__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.me__txt b { font-size: 12.5px; font-weight: 600; }
.me__txt span { font-size: 10px; color: var(--text-muted); }
.me__val { font-size: 11px; color: var(--text-muted); flex: none; }
.me__row--danger .me__ico { background: rgba(255,107,122,.12); color: var(--coral-400); }
.me__row--danger .me__txt b { color: var(--coral-400); }
.me__ver { text-align: center; font-size: 9.5px; color: var(--text-muted); padding: 10px 0 0; }

/* ============ خريطة الشاشات ============ */
.mp { padding: 0 18px 16px; }
.mp__title { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.mp__sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.mp__g { margin-top: 16px; }
.mp__gt { font-size: 10.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; padding-inline-start: 3px; }
.mp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mp__btn {
  display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line); text-align: start;
  font-size: 11.5px; font-weight: 600; transition: background var(--t-fast), transform var(--t-fast);
}
.mp__btn:active { transform: scale(.97); background: var(--glass-2); }
.mp__btn i { font-size: 15px; color: var(--gold-400); flex: none; }
.mp__btn--new { border-color: rgba(228,176,74,.3); background: rgba(228,176,74,.07); }