/* ============ الشاشات ============ */

/* — البداية والتحميل — */
.splash {
  flex: 1; display: grid; place-items: center; gap: 0;
  background: radial-gradient(600px 400px at 50% 38%, rgba(228,176,74,.16), transparent 70%);
}
.splash__mark { display: flex; gap: 8px; flex-direction: column; align-items: center; }
.splash__tiles { display: flex; gap: 7px; direction: ltr; }
.splash__tiles .tile { animation: tilePop 620ms var(--ease) both; }
.splash__tiles .tile:nth-child(2) { animation-delay: 90ms }
.splash__tiles .tile:nth-child(3) { animation-delay: 180ms }
@keyframes tilePop { from { opacity: 0; transform: translateY(14px) rotate(-6deg) } }
.splash__name { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-top: 18px; }
.splash__latin { font-size: 11.5px; letter-spacing: .28em; color: var(--text-muted); margin-top: 6px; }
.splash__loader { margin-top: 34px; width: 120px; height: 3px; border-radius: 9px; background: var(--ink-600); overflow: hidden; }
.splash__loader::after { content: ""; display: block; width: 45%; height: 100%; background: var(--gold-500);
  border-radius: 9px; animation: loadSlide 1.4s var(--ease) infinite; }
@keyframes loadSlide { 0% { transform: translateX(120%) } 100% { transform: translateX(-220%) } }

/* — التعريف (Onboarding) — */
.onb { flex: 1; display: flex; flex-direction: column; padding: 0 24px 18px; }
.onb__art {
  flex: 1; display: grid; place-items: center; position: relative; min-height: 0;
}
.onb__art .tile--lg { transform: rotate(-4deg); }
.onb__ring {
  position: absolute; width: 236px; height: 236px; border-radius: 50%;
  border: 1px dashed rgba(228,176,74,.22);
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.onb__body { text-align: center; padding: 0 6px 22px; }
.onb__title { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1.3; }
.onb__text { font-size: 14px; line-height: 1.7; color: var(--text-2); margin-top: 10px; }
.dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.dots span { width: 6px; height: 6px; border-radius: 9px; background: var(--line-strong); transition: all var(--t-base); }
.dots span.is-on { width: 22px; background: var(--gold-500); }

/* — الرئيسية — */
.home__greet { display: flex; align-items: center; gap: 12px; padding: 8px 20px 4px; }
.home__hello { flex: 1; }
.home__hello b { font-family: var(--font-display); font-size: 18px; font-weight: 600; display: block; }
.home__hello span { font-size: 12px; color: var(--text-muted); }
.hero {
  margin: 14px 20px 0; padding: 20px;
  border-radius: var(--r-xl); position: relative; overflow: hidden;
  background:
    radial-gradient(300px 180px at 88% -20%, rgba(228,176,74,.28), transparent 70%),
    linear-gradient(160deg, #1A2338, #101728 70%);
  border: 1px solid rgba(228,176,74,.2);
}
.hero__tiles { display: flex; gap: 6px; direction: ltr; margin-bottom: 14px; }
.hero__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.hero__sub { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6; }
.hero__cta { margin-top: 16px; }
.quick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px 0;
}
.quick__card {
  text-align: start; padding: 14px; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
  position: relative; overflow: hidden;
}
.quick__card:active { transform: scale(.975); background: var(--glass-2); }
.quick__icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(228,176,74,.14); color: var(--gold-400); font-size: 18px; margin-bottom: 10px; }
.quick__icon--mint { background: rgba(63,214,168,.14); color: var(--mint-400); }
.quick__title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; }
.quick__sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.section { padding: 22px 20px 0; }
.section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-2); }
.section__more { font-size: 12px; color: var(--gold-500); font-weight: 600; }

/* — الانضمام بكود — */
.join { flex: 1; display: flex; flex-direction: column; padding: 8px 20px 0; }
.join__head { text-align: center; padding: 12px 0 26px; }
.join__hint { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.7; }
.join__pad { margin-top: auto; padding-bottom: 8px; }
.join__status { min-height: 20px; font-size: 12.5px; text-align: center; margin-bottom: 10px; }

/* — إنشاء غرفة — */
.create { padding: 4px 20px 0; }
.optrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; }
.optrow + .optrow { border-top: 1px solid var(--line); }
.optrow__label { font-size: 14px; font-weight: 600; }
.optrow__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.stepper { display: flex; align-items: center; gap: 4px; background: var(--ink-800);
  border: 1px solid var(--line); border-radius: var(--r-full); padding: 4px; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text); background: var(--glass-2); font-size: 14px; }
.stepper__val { min-width: 34px; text-align: center; font-family: var(--font-display);
  font-size: 15px; font-weight: 700; }
.catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catpick {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  border-radius: var(--r-sm); background: var(--ink-800); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--text-muted); transition: all var(--t-fast);
}
.catpick.is-on { background: rgba(228,176,74,.12); border-color: rgba(228,176,74,.45); color: var(--gold-400); }
.catpick i { font-size: 15px; }
.sticky-cta {
  flex: none; padding: 12px 20px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--ink-900) 30%);
}

/* — غرفة الانتظار — */
.lobby { padding: 4px 20px 0; }
.invite {
  text-align: center; padding: 20px 16px 18px; border-radius: var(--r-lg);
  background: radial-gradient(240px 140px at 50% 0%, rgba(228,176,74,.22), transparent 75%), var(--ink-700);
  border: 1px solid rgba(228,176,74,.22);
}
.invite__label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.invite__code {
  font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: .18em;
  color: var(--gold-400); margin: 6px 0 12px; direction: ltr;
}
.invite__actions { display: flex; gap: 8px; justify-content: center; }
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.player {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line); position: relative;
}
.player--empty { border-style: dashed; background: transparent; justify-content: center; color: var(--text-muted);
  min-height: 68px; font-size: 12px; }
.player__name { font-size: 13px; font-weight: 600; }
.player__state { font-size: 10.5px; margin-top: 2px; }
.player__host { position: absolute; top: 8px; inset-inline-start: 10px; font-size: 10px;
  color: var(--gold-500); background: rgba(228,176,74,.12); padding: 1px 6px; border-radius: 6px; }

/* — اختيار الحرف — */
.pickletter { flex: 1; display: flex; flex-direction: column; padding: 6px 20px 0; }
.pickletter__head { text-align: center; padding: 6px 0 20px; }
.pickletter__grid { overflow-y: auto; }

/* — شاشة اللعب — */
.game { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.game__top { display: flex; align-items: center; gap: 10px; padding: 6px 20px 12px; }
.game__round { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.game__letter { display: flex; align-items: center; gap: 10px; }
.game__fields { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px; display: flex;
  flex-direction: column; gap: 9px; }
.afield { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px;
  border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line);
  transition: border-color var(--t-fast), background var(--t-fast); }
.afield:focus-within { border-color: rgba(228,176,74,.55); background: rgba(228,176,74,.05); }
.afield.is-done { border-color: rgba(63,214,168,.4); background: rgba(63,214,168,.06); }
.afield__label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.afield input {
  width: 100%; background: none; border: 0; outline: none; padding: 0;
  font-size: 16px; font-weight: 500; color: var(--text); margin-top: 2px;
}
.afield input::placeholder { color: #4F586B; font-size: 14px; }
.afield__box { flex: 1; min-width: 0; }
.game__foot { flex: none; padding: 12px 20px 6px; display: flex; align-items: center; gap: 10px; }

/* — الكشف والمقارنة — */
.reveal { padding: 4px 20px 0; }
.reveal__head { display: flex; align-items: center; gap: 14px; padding: 6px 0 18px; }
.reveal__titles b { font-family: var(--font-display); font-size: 19px; font-weight: 700; display: block; }
.reveal__titles span { font-size: 12px; color: var(--text-muted); }
.revcat { border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line);
  overflow: hidden; margin-bottom: 9px; }
.revcat__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); }
.revcat__head i { font-size: 14px; color: var(--gold-400); }
.revrow { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.revrow + .revrow { border-top: 1px solid rgba(255,255,255,.04); }
.revrow--me { background: rgba(228,176,74,.06); }
.revrow__word { flex: 1; font-size: 14px; font-weight: 500; }
.revrow__word--empty { color: #4F586B; font-weight: 400; font-style: normal; }
.revrow__pts { font-family: var(--font-display); font-size: 13px; font-weight: 700; min-width: 26px; text-align: end; }
.reveal__foot { flex: none; padding: 12px 20px 6px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(7,11,20,.9) 40%); }

/* — النتائج — */
.results { padding: 4px 20px 0; }
.results__head { text-align: center; padding: 10px 0 22px; }
.podium { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 22px; }
.podium__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.podium__bar {
  width: 100%; border-radius: 14px 14px 6px 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 10px 0;
  background: linear-gradient(180deg, rgba(228,176,74,.22), rgba(228,176,74,.04));
  border: 1px solid rgba(228,176,74,.3); border-bottom: 0;
}
.podium__item:nth-child(1) .podium__bar { height: 96px;
  background: linear-gradient(180deg, rgba(214,224,238,.16), rgba(214,224,238,.03));
  border-color: rgba(214,224,238,.24); }
.podium__item:nth-child(2) .podium__bar { height: 118px; }
.podium__item:nth-child(3) .podium__bar { height: 74px; background: var(--glass); border-color: var(--line); }
.podium__rank { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gold-400); }
.podium__pts { font-size: 11px; color: var(--text-2); }
.podium__name { font-size: 12px; font-weight: 600; }

/* — الملف الشخصي — */
.profile__hero { padding: 10px 20px 0; }
.profile__card { display: flex; align-items: center; gap: 14px; padding: 18px;
  border-radius: var(--r-xl); background: radial-gradient(200px 120px at 90% 0%, rgba(228,176,74,.2), transparent 70%), var(--ink-700);
  border: 1px solid var(--line-strong); }
.profile__name { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.profile__tag { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.xpbar { height: 6px; border-radius: 9px; background: var(--ink-500); overflow: hidden; margin-top: 8px; }
.xpbar span { display: block; height: 100%; border-radius: 9px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px 20px 0; }
.statbox { padding: 14px; border-radius: var(--r-md); background: var(--glass);
  border: 1px solid var(--line); }
.statbox__num { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.statbox__label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.menu { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 8px; }

/* — المصادقة — */
.auth { padding: 6px 22px 0; }
.auth__mark { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 22px; }
.auth__form { display: flex; flex-direction: column; gap: 12px; }
.auth__or { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11.5px; margin: 4px 0; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__social { display: flex; gap: 8px; }
.auth__social .btn { flex: 1; height: 50px; font-size: 14px; }

/* — المتصدرون — */
.lb { padding: 4px 20px 0; }
.lb__top { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.lb__me { background: rgba(228,176,74,.08); border-color: rgba(228,176,74,.3); }
.lb__rank { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-muted);
  width: 22px; text-align: center; }
.lb__top .lb__rank, .lb__rows .lb__rank { flex: none; }

/* — سجل المباريات — */
.hist { padding: 4px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.hist__date { font-size: 11px; color: var(--text-muted); font-weight: 600; padding: 14px 0 2px; }
.hist__row { display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); }
.hist__place { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; flex: none; }
.hist__place--1 { background: rgba(228,176,74,.16); color: var(--gold-400); }
.hist__place--2 { background: rgba(199,206,220,.12); color: var(--text-2); }
.hist__place--3 { background: rgba(196,124,74,.16); color: #D89660; }
.hist__place--n { background: var(--glass-2); color: var(--text-muted); }

/* — الإعدادات والمساعدة — */
.settings { padding: 4px 20px 0; }
.setgroup { margin-bottom: 18px; }
.setgroup__title { font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 0 4px 8px; }
.setgroup .listrow + .listrow { margin-top: 7px; }
.toggle { width: 46px; height: 27px; border-radius: 9px; background: var(--ink-500);
  position: relative; transition: background var(--t-fast); flex: none; }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 21px; height: 21px;
  border-radius: 6px; background: #8D97AB; transition: all var(--t-fast) var(--ease); }
.toggle.is-on { background: rgba(63,214,168,.3); }
.toggle.is-on::after { inset-inline-start: 22px; background: var(--mint-400); }
.help__step { display: flex; gap: 12px; padding: 0 0 18px; }
.help__num { width: 26px; height: 26px; border-radius: 9px; background: rgba(228,176,74,.14);
  color: var(--gold-400); display: grid; place-items: center; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; flex: none; }
.help__txt b { font-size: 13.5px; font-weight: 600; display: block; }
.help__txt p { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; margin-top: 3px; }