:root {
  --bg-start: #05081a;
  --bg-end: #000000;
  --accent: #ff7a3c;
  --gold: #ffd700;
  --text-main: #f5f7ff;
  --text-soft: #a9b3d9;
  --pill-start: #0b2f78;
  --pill-end: #031433;
  --radius-pill: 999px;
}

/* Layout أساسي ومحسَّن */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-main);
  background: radial-gradient(circle at top left, var(--bg-start), var(--bg-end));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* الأزرار / الـ Pills */
button,
a.button,
div[class*="pill"],
a[class*="pill"] {
  border-radius: var(--radius-pill);
  border: 0;
}

/* الأزرار الزرقاء الطويلة */
button,
a.button {
  background: linear-gradient(90deg, var(--pill-start), var(--pill-end));
  color: var(--gold);
  letter-spacing: 0.16em;
}

/* تحسين مساحة الـ HERO والعداد على الموبايل */
@media (max-width: 768px) {
  .hero-main,
  .hero,
  .section-hero {
    padding-top: 6.5rem;
  }
}

/* Social Pills */
.pill-social {
  background: rgba(2, 12, 40, 0.86);
  padding: 0.75rem 1.5rem;
  margin: 0.25rem 0.35rem;
}

/* بطاقات للعوالم (إذا استُخدمت) */
.world-card {
  border-radius: 1.5rem;
  background: radial-gradient(circle at top, #15224a, #020515);
  padding: 1.5rem 1.75rem;
}

/* تمرير سلس */
html {
  scroll-behavior: smooth;
}