/* Jawi dan Khat (KAFA Darjah 2) — tema subjek. Gaya asas dari _core/css/style.css. */
:root {
  --blue: #5b4fcf;          /* ungu-biru lembut */
  --sky: #f4f1ff;           /* latar ungu pucat */
  --gold: #d9a441;          /* emas tulisan khat */
  --jform: #e3ddf7;         /* bingkai kad bentuk huruf */
}
body {
  background: var(--sky) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><circle cx="20" cy="30" r="4" fill="%23e5dfff"/><circle cx="90" cy="70" r="5" fill="%23ffeccd"/><circle cx="55" cy="100" r="3" fill="%23e9f3ff"/></svg>');
}
.homehead h1 { color: var(--blue); letter-spacing: .06em; }
.namecard h1, .celcard h2 { color: var(--blue); }
.btn.primary { background: #6d5dd3; border-color: #4f46b8; }
.gnum { background: #ece7ff; }
.opt { border-color: var(--jform); }
.opt:hover { background: #f3f0ff; }

/* papan tulis khat: kertas kraf + sempadan emas */
.stage {
  border-top: 6px solid var(--gold);
  background: linear-gradient(180deg, #fffdf7 0%, #faf3e3 100%);
  box-shadow: 0 6px 18px rgba(91, 79, 207, .14);
}

/* glif jawi & harakat: saiz besar, ruang cukup supaya baris tak terpotong */
.jaw, .oe {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: "Traditional Arabic", "Scheherazade New", "Noto Naskh Arabic", "Segoe UI", serif;
  line-height: 1.9;
}
.opt .oe { font-size: clamp(2.2rem, 9vw, 3.5rem); line-height: 1.9; }
.mitem .oe { font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.9; }
.chip .oe { font-size: 2rem; line-height: 1.9; }
.bin .oe { font-size: 1.6rem; line-height: 1.9; }
.dcell .oe { font-size: clamp(1rem, 3.6vw, 1.45rem); line-height: 1.9; }
.opt.ar .oe { font-size: clamp(1.15rem, 4vw, 1.7rem); line-height: 1.9; }
.qtext .jaw { font-size: clamp(1.6rem, 6vw, 2.4rem); }

/* kad bentuk huruf berwarna: awal / tengah / akhir (konsisten semua game) */
.fawal .oe { border-bottom: 6px solid #6d5dd3; }
.ftengah .oe { border-bottom: 6px solid #2fb457; }
.fakhir .oe { border-bottom: 6px solid #e4574c; }
.memitem .oe { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}