/* Bahasa Melayu Darjah 5 — tema subjek (pastel biru-hijau, tumpuan teks).
   Gaya asas dari _core/css/style.css; ubah suai warna/aksen sahaja di sini. */
:root {
  --sky: #e8f3ff;
  --blue: #1f6fbf;
  --green: #2f9e6b;
  --paper: #fdfdfb;
}
.homehead h1 { color: #1f6fbf; }
.brandmini { color: #2b7fc4; }
.namecard h1, .celcard h2 { color: #1f6fbf; }
.gamecard:hover, .opt:hover, .chip:hover, .btn:hover { transform: translateY(-2px); }

/* ayat panjang (opsyen, item sort/order/find) kekal selesa dibaca 11 tahun */
.opt .ot, .opt .oe { line-height: 1.35; }
.opt .ot { font-size: 1.02rem; text-align: left; }
.opt { padding: 14px 14px; }
.opts { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
@media (min-width: 760px) { .opts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.opt .oe { font-size: clamp(1.1rem, 3vw, 1.5rem); }
.opts.two { max-width: 640px; }

/* chip (sort/order/cloze/build/label) — teks ayat, bukan emoji sahaja */
.chip { min-width: 104px; max-width: 100%; padding: 10px 12px; }
.chip .oe { font-size: 1.4rem; }
.chip .ct { font-size: .95rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.chip .ot { font-size: 1rem; font-weight: 800; line-height: 1.25; }

/* tong (sort): ayat panjang perlu ruang */
.bin { min-height: 150px; align-items: stretch; }
.bslot { display: flex; flex-direction: column; gap: 6px; width: 100%; }

/* petikan pemahaman (dunia 7–9) — teks jadi tumpuan */
.passage {
  background: #fffdf3; border: 3px solid #ffe9b0; border-radius: 18px; padding: 16px 18px;
  font-size: clamp(1.02rem, 2.6vw, 1.18rem); font-weight: 600; line-height: 1.65; text-align: left;
  margin: 0 auto 14px; max-width: 660px;
}

/* cloze: bank perkataan mesra jari */
.clozeline { font-weight: 700; line-height: 1.9; }
.blank { min-width: 118px; }

/* label rajah: nama bahagian surat/pantun */
.labelarea { max-width: 620px; aspect-ratio: 4 / 3; }
.slot.lbl { min-width: 92px; }
.slot.lbl .bt { font-size: .82rem; line-height: 1.2; }

/* input: kotak taip besar */
.typeinput { width: min(460px, 100%); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}