/* Asas: reset, fon, aturan Arab (RTL) dan BM (LTR) */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* Elak tarik-segar dan lantunan skrol yang tidak sengaja */
  overscroll-behavior: none;
}

body {
  /* Elak zum ketik-dua-kali pada semua elemen */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea { -webkit-user-select: text; user-select: text; }

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

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, p { margin: 0; }

h1, h2, h3 { font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }

/* ---- Teks Arab ----
   Guna kelas .ar pada SETIAP elemen Arab. dir="rtl" diletak dalam HTML oleh JS.
   line-height tinggi supaya baris (harakat) tidak terpotong. */
.ar {
  font-family: var(--font-ar);
  font-weight: 700;
  line-height: 1.9;
  direction: rtl;
  unicode-bidi: isolate;
  padding-block: 0.1em;
  letter-spacing: 0;
  font-feature-settings: "kern", "liga", "calt", "mark", "mkmk";
}

/* Fokus papan kekunci jelas untuk PC */
:focus { outline: none; }
:focus-visible {
  outline: 4px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Teks untuk pembaca skrin sahaja */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* Kurangkan animasi: ikut tetapan sistem ATAU tetapan dalam game */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}