* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100dvh;
  background: var(--bg-dark);
}

body {
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--gold-ink) / 0.14), transparent 42%),
    radial-gradient(circle at 15% 85%, rgba(140, 90, 35, 0.18), transparent 42%),
    linear-gradient(180deg, var(--page-grad-1) 0%, var(--page-grad-2) 48%, var(--page-grad-3) 100%);
  font-family: "Cairo", system-ui, sans-serif;
  color: var(--text-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* لا padding عام لـsafe-area على body: كل شاشة تتولى حواف الإشعارات بنفسها
   حيث يلزم فعليًا — الشاشات الثابتة (calibrate) عبر .is-camera-screen،
   والشاشات المتدفقة (welcome, main-menu, ar-prepare) عبر عناصرها الخاصة
   (الشريط العلوي، مبدّل اللغة...). padding عام هنا كان يتكرر فوق حساب كل
   شاشة لحسابها الخاص فيُضيف فراغًا لا داعي له. */

/* شاشات الكاميرا/AR فقط تملك الفيوبورت بالكامل بلا
   تمرير — أضِف الصنف على body. باقي الشاشات (welcome, main-menu) تمرّر
   طبيعيًا لأن شبكة الـ93 طبقًا لا يمكن حشرها في فيوبورت ثابت واحد. */
html:has(body.is-camera-screen) {
  height: 100dvh;
  overflow: hidden;
}

body.is-camera-screen {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

img {
  display: block;
  max-width: 100%;
}

video {
  display: block;
}

.hidden {
  display: none !important;
}

/* نص متاح لقارئ الشاشة فقط — مرئي بصريًا: لا شيء، لكنه يبقى في شجرة
   الوصولية (بخلاف .hidden/display:none التي تُسقطه من هذه الشجرة تمامًا) */
.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;
}