/* ========== base.css (مشترك) ========== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#6366f1; --primary-dark:#4f46e5; --secondary:#06b6d4; --accent:#f59e0b;
  --bg-1:#0f0f23; --bg-2:#1a1a2e; --bg-3:#16213e;
  --text-1:#ffffff; --text-2:#a1a1aa; --text-3:#6b7280;
  --border:#374151; --success:#10b981; --error:#ef4444;
  --r:12px; --shadow:0 10px 25px rgba(0,0,0,.3); --shadow-lg:0 20px 40px rgba(0,0,0,.4);
  --ease:cubic-bezier(.4,0,.2,1);
}
@font-face{font-family:'Inter';font-display:swap;src:local('Inter')}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 100%);
  color:var(--text-1); line-height:1.6; min-height:100vh; overflow-x:hidden;
}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* Header مشترك */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(15,15,35,.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  height:80px;
}
.header-content{height:80px;display:flex;align-items:center;justify-content:space-between}
.logo a{text-decoration:none}
.logo-text{
  font-size:1.5rem;font-weight:700;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav{display:flex;gap:1rem;align-items:center}
.nav-link{
  color:var(--text-2); text-decoration:none; padding:.5rem 1rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)
}
.nav-link:hover,.nav-link.active{background:rgba(99,102,241,.12);color:#fff;border-color:rgba(99,102,241,.35)}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;border:none;border-radius:var(--r);
  background:var(--primary);color:#fff;font-weight:700;cursor:pointer;
  text-decoration:none;transition:background-color .2s var(--ease),transform .2s var(--ease)
}
.btn:hover{background:var(--primary-dark);transform:translateY(-2px)}

.footer{
  background:var(--bg-2);border-top:1px solid var(--border);
  padding:2.5rem 0 1rem;margin-top:auto
}
.footer-content{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:1.25rem
}
.footer-section h3,.footer-section h4{margin-bottom:.75rem}
.footer-section p{margin-bottom:.5rem}
.footer-section ul{list-style:none}
.footer-section li{margin-bottom:.35rem}
.footer-section a{color:var(--text-2);text-decoration:none;transition:color .2s var(--ease)}
.footer-section a:hover{color:var(--primary)}
.footer-bottom{text-align:center;padding-top:1rem;border-top:1px solid var(--border)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* === Headings: fix upcoming UA change + prevent CLS === */
:root{
  /* نفس القيم التي تستخدمها في .game-title/.game-subtitle */
  --h1-size: clamp(2rem, 2vw + 1rem, 2.5rem);
  --h2-size: 1.05rem; /* عندك Subtitle كنص صغير */
}

/* اجعل h1 ثابتًا داخل (section/article/nav/aside) وأيضًا عموميًا */
h1, :where(article,aside,nav,section) h1{
  font-size: var(--h1-size);
  line-height: 1.2;
}

/* وثبّت h2 كذلك لو استخدمته بدون كلاس */
h2, :where(article,aside,nav,section) h2{
  font-size: var(--h2-size);
  line-height: 1.3;
}

/* ربط .game-title/.game-subtitle بنفس القيم لضمان التطابق المبكر */
.game-title{ font-size: var(--h1-size); line-height:1.2 }
.game-subtitle{ font-size: var(--h2-size); line-height:1.3 }

/* Legal pages styling */
.legal-section {
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.legal-section h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-1);
}

.legal-section h2 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
    color: var(--text-1);
}

.legal-section p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-2);
}

.legal-section ul,
.legal-section ol {
    margin: 1rem 0 1rem 2rem;
    color: var(--text-2);
}

.legal-section li {
    margin-bottom: 0.5rem;
}

.legal-section a {
    color: var(--primary);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

.contact-info {
    background: var(--bg-3);
    padding: 1.5rem;
    border-radius: var(--r);
    margin: 1rem 0;
}