/* =========================================================
   TKIT Keluarga Al Qur'an – Halaman Kuis Islami
   Melengkapi assets/style.css (.game…) dan daftar/daftar.css (.df…)
   ========================================================= */

.kuis-tingkat { border: 0; margin: 0 0 18px; padding: 0; }
.kuis-tingkat legend { padding: 0; margin-bottom: 8px; font-weight: 800; color: var(--teks); }
.kuis-tingkat small { margin-left: 6px; font-weight: 700; opacity: .8; }

.kuis-sub { font-size: 1.25rem; color: var(--utama); margin-bottom: .6em; }

/* ---------- Kartu kategori ---------- */
.kuis-kategori { list-style: none; display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 560px) { .kuis-kategori { grid-template-columns: 1fr 1fr; } }
.kuis-kategori .df-muat { grid-column: 1 / -1; }
.kuis-kartu {
  display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 14px; width: 100%; height: 100%;
  text-align: left; cursor: pointer; padding: 12px 14px;
  background: #fff; border: 3px solid var(--warna, var(--utama)); border-radius: 22px;
  box-shadow: 0 6px 0 var(--warna, var(--utama)); transition: transform .2s ease, box-shadow .2s ease;
}
.kuis-kartu:hover { transform: translateY(-3px); }
.kuis-kartu:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--warna, var(--utama)); }
.kuis-kartu__ikon {
  grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px;
  background: color-mix(in srgb, var(--warna, var(--utama)) 12%, #fff); font-size: 2rem; line-height: 1;
}
.kuis-kartu strong { font-family: var(--huruf-judul); font-size: 1.2rem; line-height: 1.2; color: var(--teks); }
.kuis-kartu__ket { font-size: .92rem; font-weight: 700; color: var(--teks-lembut); }
.kuis-kartu__rekor { color: #8a5a00; white-space: nowrap; }
.kuis-kartu--campur { background: var(--aksen-muda); }
@media (min-width: 560px) { .kuis-kategori li.kuis-lebar { grid-column: 1 / -1; } }

.kuis-bawah { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }

/* ---------- Layar bermain ---------- */
.kuis-panggung .game__arena { padding-top: 14px; }
.kuis-maju { height: 10px; margin: 0 0 6px; border-radius: 999px; background: var(--utama-muda); overflow: hidden; }
.kuis-maju span { display: block; height: 100%; border-radius: 999px; background: var(--aksen); transition: width .3s ease; }
.kuis-nomor { margin: 0 0 10px; font-weight: 800; color: var(--teks-lembut); }
.kuis-lencana {
  display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px;
  background: var(--utama-muda); color: var(--utama); font-size: .82rem; vertical-align: middle;
}

/* Lafadz Arab: huruf besar, baris longgar supaya harakat tidak bertumpuk */
.kuis-arab {
  font-family: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Scheherazade New", serif;
  font-weight: 700; direction: rtl; unicode-bidi: isolate; line-height: 2;
}
p.kuis-arab {
  margin: 0 0 14px; padding: 10px 16px; border-radius: 18px; background: var(--aksen-muda);
  font-size: clamp(1.6rem, 6.4vw, 2.2rem); color: var(--teks);
}

.kuis-pilihan { display: grid; gap: 10px; }
.kuis-pilih { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-size: 1.15rem; }
.kuis-pilih__huruf {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--utama-sedang); color: var(--utama); font-weight: 900; font-size: 1rem;
}
.kuis-pilih__isi { flex: 1; min-width: 0; }
.kuis-pilih .kuis-arab { display: block; font-size: 1.6rem; text-align: right; }
.kuis-pilih__latin { display: block; font-size: .95rem; font-weight: 700; color: var(--teks-lembut); }
.kuis-pilih:disabled { opacity: .55; }
.kuis-pilih.benar, .kuis-pilih.salah { opacity: 1; }
.kuis-pilih.benar .kuis-pilih__huruf { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.kuis-pilih.salah .kuis-pilih__huruf { background: #e03131; border-color: #e03131; color: #fff; }

.kuis-panggung .game__umpan { padding: 10px 0 0; min-height: 0; }

/* Penjelasan setelah menjawab */
.kuis-jelas {
  margin-top: 14px; padding: 12px 16px; border-radius: 18px; text-align: left;
  background: #f1fbf3; border: 2px solid #b2e6bd;
}
.kuis-jelas[data-jenis="salah"] { background: #fff5ef; border-color: #ffd0b5; }
.kuis-jelas__judul { margin: 0 0 4px; font-family: var(--huruf-judul); font-weight: 800; font-size: 1.2rem; color: var(--hijau); }
.kuis-jelas[data-jenis="salah"] .kuis-jelas__judul { color: #c2410c; }
.kuis-jelas p { margin: 0 0 4px; }
.kuis-jelas p.kuis-arab { margin: 6px 0 0; padding: 0; background: none; font-size: 1.45rem; text-align: right; }
.kuis-lanjut { margin-top: 14px; }

/* Layar hasil: daftar soal yang perlu diulang */
.kuis-ulang { margin-top: 18px; text-align: left; }
.kuis-ulang h3 { font-size: 1.15rem; color: var(--utama); margin-bottom: .5em; }
.kuis-ulang ol { display: grid; gap: 8px; padding-left: 1.4em; }
.kuis-ulang li { padding-left: 2px; }
.kuis-ulang b { color: var(--hijau); }
.kuis-ulang b { display: block; }
.kuis-ulang .kuis-arab { display: block; font-size: 1.3rem; text-align: left; }

/* Judul layar hasil memakai h3 di halaman ini (di Pojok Bermain h4) */
.kuis-panggung .game__hasil h3 { margin: 4px 0; font-size: 1.7rem; line-height: 1.2; color: var(--utama); }
.kuis-panggung .game__hasil h3:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .kuis-kartu, .kuis-maju span { transition: none; }
}