/* ============================================================
   منطق — base.css : reset, fonts, tokens, layout, typography
   ============================================================ */

@font-face{
  font-family:'Amiri';
  src:url('../fonts/Amiri-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Amiri';
  src:url('../fonts/Amiri-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  src:url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; min-height:100vh; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul[class],ol[class]{ list-style:none; padding:0; }
img,svg{ max-width:100%; display:block; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; padding:0; }
:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* ---------- structural tokens ---------- */
:root{
  --font-display:'Amiri', 'Geeza Pro', serif;
  --font-body:'IBM Plex Sans Arabic', 'Geeza Pro', 'Segoe UI', system-ui, sans-serif;
  --radius-s:8px; --radius-m:14px; --radius-l:22px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem;
  --shadow-1:0 1px 3px rgba(20,12,4,.08), 0 4px 14px rgba(20,12,4,.06);
  --shadow-2:0 2px 6px rgba(20,12,4,.12), 0 10px 30px rgba(20,12,4,.10);
  --maxw:760px;
  --header-h:3.6rem;
}

body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  background:var(--bg);
  color:var(--ink);
  text-rendering:optimizeLegibility;
}

/* ---------- app frame ---------- */
.app-root{ min-height:100vh; display:flex; flex-direction:column; }
.screen{ width:100%; max-width:var(--maxw); margin:0 auto; padding:var(--sp-4) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom)); flex:1; }
@media (max-width:420px){ .screen{ padding-inline:var(--sp-3); } }

/* ---------- typography ---------- */
.t-display{ font-family:var(--font-display); font-weight:700; }
h1.t-display{ font-size:1.9rem; line-height:1.4; }
h2.t-display{ font-size:1.45rem; line-height:1.5; }
h3.t-display{ font-size:1.2rem; line-height:1.5; }
.t-muted{ color:var(--muted); }
.t-small{ font-size:.85rem; }
.t-center{ text-align:center; }
.t-gold{ color:var(--gold); }
.t-accent{ color:var(--accent); }
.t-num{ font-variant-numeric:tabular-nums; }

/* long Arabic puzzle text */
.prose{ font-size:1.05rem; line-height:2; }
.prose p + p{ margin-top:var(--sp-3); }

hr.rule{ border:none; height:1px; background:var(--border); margin:var(--sp-4) 0; }
.rule-ornament{ display:flex; align-items:center; gap:var(--sp-3); color:var(--gold); margin:var(--sp-4) 0; }
.rule-ornament::before,.rule-ornament::after{ content:''; flex:1; height:1px; background:var(--border); }

/* ---------- utilities ---------- */
.row{ display:flex; align-items:center; gap:var(--sp-3); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; }
.stack > * + *{ margin-top:var(--sp-3); }
.stack-l > * + *{ margin-top:var(--sp-4); }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- boot splash ---------- */
.boot-splash{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); }
.boot-title{ font-family:var(--font-display); font-size:3rem; font-weight:700; color:var(--ink); }
.boot-sub{ color:var(--muted); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important; }
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;
}

/* scrollable regions */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }