/* base.css — تصفير، تخطيط أساسي، RTL، منع تمرير/تكبير على الجوال. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: var(--font); color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bot));
  -webkit-user-select: none; user-select: none;
  touch-action: none; overscroll-behavior: none;
  position: fixed; inset: 0;
}
body { font-size: 16px; }

#game {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}

#ui {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;             /* الطبقات الفعّالة تعيد تفعيله */
}
/* الشاشات (قوائم/مودال) تلتقط النقر بالكامل.
   لكن HUD و controls تبقى تمريرية (none) وأطفالها التفاعلية فقط auto
   — وإلا غطّت ملء الشاشة وحجبت الأزرار واللمس على الكانفس. */
#ui .screen { pointer-events: auto; }

/* الشاشات: تغطّي كامل المساحة وتتمركز */
.screen {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  z-index: 20;
}
.screen.active { display: flex; }
.screen.modal { background: rgba(20,24,40,.45); backdrop-filter: blur(4px); z-index: 40; }

.muted { color: var(--ink-soft); }
.hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.hidden { display: none !important; }

img, canvas { display: block; }
input, button { font-family: inherit; }
code { background: rgba(40,48,74,.08); padding: 1px 6px; border-radius: 6px; font-size: .9em; }

/* فلاش/فينييت للجوس */
#flash {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: #fff; opacity: 0; mix-blend-mode: screen;
}
#vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 160px 40px rgba(255,90,90,.55);
  transition: opacity .25s ease;
}