/* =========================================================
   TKIT Keluarga Al Qur'an – Halaman Main Berdua
   Melengkapi assets/style.css, daftar/daftar.css (.df…), dan kuis/kuis.css (.kuis…)
   ========================================================= */

/* ---------- Layar persiapan ---------- */
.bd-mode { display: grid; gap: 14px; grid-template-columns: 1fr; padding-bottom: 6px; }
@media (min-width: 640px) { .bd-mode { grid-template-columns: repeat(3, 1fr); } }
.bd-mode__kartu {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 16px 12px; cursor: pointer;
  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;
}
.bd-mode__kartu input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bd-mode__kartu:hover { transform: translateY(-3px); }
.bd-mode__kartu:has(input:checked) {
  background: var(--aksen-muda); transform: translateY(4px); box-shadow: 0 2px 0 var(--warna, var(--utama));
  outline: 4px solid var(--aksen); outline-offset: 2px;
}
.bd-mode__kartu:has(input:focus-visible) { outline: 3px solid var(--kedua); outline-offset: 3px; }
.bd-mode__ikon { font-size: 2.8rem; line-height: 1.1; }
.bd-mode__kartu strong { font-family: var(--huruf-judul); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--teks); }
.bd-mode__isi { font-size: .92rem; font-weight: 700; line-height: 1.35; color: var(--teks-lembut); }
#bd-topik .df-muat { padding: 8px 0; }
.bd-mulai { margin: 26px 0 10px; text-align: center; }
.bd-mulai .tombol { font-size: 1.4rem; padding: .8em 2em; }
.bd-mulai .tombol:disabled { opacity: .55; cursor: default; }

/* ---------- Layar bermain ----------
   Semua ukuran memakai em dari ukuran huruf layar, supaya ikut membesar di smartboard. */
body.bd-main { overflow: hidden; }
.bd-layar {
  --biru: #1971c2; --biru-muda: #e7f5ff; --oranye: #d9480f; --oranye-muda: #fff4e6;
  position: fixed; inset: 0; z-index: 500;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--utama-muda); color: var(--teks);
  font-size: clamp(13px, .9vw + .9vh, 46px); line-height: 1.3;
  overflow: hidden;
  /* Dua jari di layar tidak boleh dianggap mencubit/menggeser halaman */
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.bd-layar button { touch-action: none; }

.bd-bar { display: flex; align-items: center; gap: .5em; padding: .3em .6em; background: var(--utama); color: #fff; }
.bd-bar__judul { flex: 1; min-width: 0; margin: 0; font-size: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-bar__judul:focus { outline: none; }
.bd-bar__ronde { padding: .1em .8em; border-radius: 999px; background: var(--aksen); color: #2b1d3f; font-weight: 800; white-space: nowrap; }
.bd-bar__ronde:empty { display: none; }
.bd-bar button {
  flex: none; min-width: 44px; min-height: 44px; padding: 0 .8em; border-radius: 999px; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .15); color: #fff;
  font-size: .9em; font-weight: 800; line-height: 1; white-space: nowrap;
}
.bd-bar button:hover { background: rgba(255, 255, 255, .28); }
.bd-bar button[aria-pressed="true"] { background: #fff; color: var(--utama); }

.bd-adegan { position: relative; height: clamp(76px, 21vh, 30vw); overflow: hidden; border-bottom: .2em solid var(--utama); }

/* Adegan 1: tarik tambang */
.bd-tali { position: absolute; inset: 0; background: linear-gradient(#dff3ff 0 64%, #b9e6a5 64%); }
.bd-tali__zona { position: absolute; top: 0; bottom: 0; width: 25%; }
.bd-tali__zona--biru { left: 0; background: color-mix(in srgb, var(--biru) 22%, transparent); border-right: .22em dashed var(--biru); }
.bd-tali__zona--oranye { right: 0; background: color-mix(in srgb, var(--oranye) 22%, transparent); border-left: .22em dashed var(--oranye); }
.bd-tali__tengah { position: absolute; left: 50%; top: 12%; bottom: 8%; border-left: .16em dashed rgba(43, 29, 63, .3); }
.bd-tali__geser { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1); }
.bd-tali__tambang {
  position: absolute; left: 35%; right: 35%; top: 62%; height: .6em; margin-top: -.3em; border-radius: 999px;
  background: repeating-linear-gradient(115deg, #c98b4b 0 .5em, #9c6330 .5em 1em); box-shadow: 0 .16em 0 rgba(0, 0, 0, .18);
}
.bd-tali__pita {
  position: absolute; left: 50%; top: 62%; width: .7em; height: 2.2em; margin: -.5em 0 0 -.35em;
  background: #e03131; border: .12em solid #fff; border-radius: .2em .2em .5em .5em; box-shadow: 0 .1em .3em rgba(0, 0, 0, .3);
}
.bd-tali__tim { position: absolute; top: 62%; font-size: 4em; line-height: 1; transform: translate(-50%, -58%); transition: transform .3s ease; }
.bd-tali__tim--biru { left: 32%; }
.bd-tali__tim--oranye { left: 68%; }
.bd-tali[data-tarik="biru"] .bd-tali__tim { transform: translate(-50%, -58%) rotate(-20deg) scale(1.12); }
.bd-tali[data-tarik="oranye"] .bd-tali__tim { transform: translate(-50%, -58%) rotate(20deg) scale(1.12); }

/* Adegan 2: balap */
.bd-lintasan { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: .35em; padding: .4em .6em; background: #b9e6a5; }
.bd-jalur { --tim: var(--biru); --maju: 0; position: relative; border: .16em solid var(--tim); border-radius: 999px; background: rgba(255, 255, 255, .85); overflow: hidden; }
.bd-jalur--oranye { --tim: var(--oranye); }
.bd-jalur__jejak {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(2em + var(--maju) * (100% - 6.6em));
  background: color-mix(in srgb, var(--tim) 28%, #fff); border-radius: 999px; transition: width .6s cubic-bezier(.3, 1.5, .5, 1);
}
.bd-jalur__pelari {
  position: absolute; top: 0; bottom: 0; left: calc(.3em + var(--maju) * (100% - 6.6em)); width: 3em;
  display: grid; place-items: center; transition: left .6s cubic-bezier(.3, 1.5, .5, 1);
}
.bd-jalur__pelari span { font-size: min(2.6em, 8vh); line-height: 1; }
.bd-jalur__pelari.lompat span { animation: bd-lompat .6s ease; }
.bd-jalur__akhir { position: absolute; right: .5em; top: 0; bottom: 0; display: grid; place-items: center; font-size: min(2.2em, 7vh); line-height: 1; }

/* Adegan 3: rebutan bintang */
.bd-rebut {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4em; padding: .3em .6em;
  background: linear-gradient(#2b1d3f, #56298a);
}
.bd-rebut__baris {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .12em;
  font-size: min(2.8em, 5.4vw); line-height: 1.1; color: rgba(255, 255, 255, .22);
}
.bd-rebut__tim { margin-right: .2em; color: #fff; }
.bd-rebut__slot.terisi { color: var(--aksen); text-shadow: 0 0 .3em rgba(249, 184, 0, .8); animation: bd-muncul .5s ease; }
.bd-rebut__tengah { font-size: min(4em, 14vh); line-height: 1; transition: transform .6s ease, opacity .6s ease; animation: bd-layang 1.6s ease-in-out infinite; }
.bd-rebut__tengah[data-ke] { animation: none; opacity: 0; }
.bd-rebut__tengah[data-ke="biru"] { transform: translateX(-8em) scale(.4) rotate(-200deg); }
.bd-rebut__tengah[data-ke="oranye"] { transform: translateX(8em) scale(.4) rotate(200deg); }

/* Meja: Tim Biru | soal | Tim Oranye */
.bd-meja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: .5em; padding: .5em; min-height: 0; }
.bd-pemain {
  --tim: var(--biru); --tim-muda: var(--biru-muda);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--tim-muda); border: .2em solid var(--tim); border-radius: 1em;
}
.bd-pemain--oranye { --tim: var(--oranye); --tim-muda: var(--oranye-muda); }
.bd-pemain__kepala { display: flex; align-items: center; gap: .4em; padding: .2em .6em; background: var(--tim); color: #fff; font-weight: 900; }
.bd-pemain__ikon { font-size: 1.6em; line-height: 1.1; }
.bd-pemain__kepala strong { flex: 1; min-width: 0; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-pemain__hasil { padding: 0 .55em; border-radius: 999px; background: #fff; color: var(--teks); white-space: nowrap; }
.bd-pemain__hasil:empty { display: none; }
.bd-pemain__poin { padding: 0 .55em; border-radius: 999px; background: rgba(255, 255, 255, .22); white-space: nowrap; }
.bd-pemain__badan { position: relative; flex: 1; min-height: 0; display: flex; }

.bd-opsi { flex: 1; min-width: 0; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: .45em; padding: .5em .5em .7em; transition: opacity .25s ease; }
.bd-pilih {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: .15em .5em;
  overflow: hidden; cursor: pointer; text-align: center;
  background: #fff; color: var(--teks); border: .16em solid var(--tim); border-radius: .8em; box-shadow: 0 .25em 0 var(--tim);
  font-family: var(--huruf-judul); font-weight: 800; font-size: 1.35em; line-height: 1.15; overflow-wrap: anywhere;
}
.bd-pilih--pendek { font-size: 2.4em; }
.bd-pilih--panjang { font-size: 1em; }
.bd-pilih:active:not(:disabled) { transform: translateY(.18em); box-shadow: 0 .07em 0 var(--tim); }
.bd-pilih:disabled { cursor: default; }
.bd-pilih .kuis-arab { font-size: 1.25em; line-height: 1.6; }
.bd-pilih__latin { font-size: .7em; font-weight: 700; color: var(--teks-lembut); }
.bd-pilih.benar { background: #d3f9d8; border-color: var(--hijau); box-shadow: 0 .25em 0 var(--hijau); }
.bd-pilih.salah { background: #ffe3e3; border-color: #e03131; box-shadow: none; }
.bd-pemain.terungkap .bd-pilih:not(.benar):not(.salah) { opacity: .4; }
.bd-meja--menunggu .bd-opsi { opacity: .3; }

/* Kabar sesudah menjawab: menutupi pilihan sampai soal ditutup */
.bd-kabar {
  position: absolute; inset: 0; margin: 0; padding: .4em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; text-align: center;
  background: var(--tim-muda); font-family: var(--huruf-judul); font-weight: 900; font-size: 1.5em; line-height: 1.2;
  animation: bd-muncul .35s ease;
}
.bd-kabar[data-jenis="salah"] { color: #c2410c; }
.bd-kabar[data-jenis="benar"], .bd-kabar[data-jenis="cepat"] { color: var(--hijau); }
.bd-kabar__ikon { font-size: 2.8em; line-height: 1.1; }
.bd-kabar small { font-size: .6em; font-weight: 800; color: var(--teks-lembut); }

.bd-soal {
  display: flex; flex-direction: column; align-items: center; gap: .4em; min-width: 0; min-height: 0; padding: .6em .8em;
  background: #fff; border: .2em solid var(--utama); border-radius: 1em; text-align: center; overflow: hidden;
}
.bd-soal__isi { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em; }
.bd-soal__gambar { font-size: 5.4em; line-height: 1.15; overflow-wrap: anywhere; }
.bd-soal__gambar--panjang { font-size: 2.5em; }
.bd-soal__gambar img { max-width: 100%; max-height: 24vh; margin: 0 auto; border-radius: .2em; }
.bd-soal__tanya { margin: 0; font-size: 1.7em; line-height: 1.2; color: var(--teks); }
.bd-soal__tanya--panjang { font-size: 1.3em; }
.bd-soal p.kuis-arab { margin: 0; padding: .1em .5em; border-radius: .5em; font-size: 1.9em; line-height: 1.8; }
.bd-waktu { flex: none; width: 100%; height: .6em; border-radius: 999px; background: var(--utama-muda); overflow: hidden; }
.bd-waktu span { display: block; height: 100%; border-radius: 999px; background: var(--hijau); transform-origin: left center; transition: transform .1s linear; }
.bd-waktu.genting span { background: #e03131; }
.bd-soal__jawab { flex: none; margin: 0; min-height: 1.3em; font-family: var(--huruf-judul); font-weight: 900; font-size: 1.3em; line-height: 1.2; color: var(--hijau); }
.bd-soal__jawab small { display: block; font-size: .68em; font-weight: 700; color: var(--teks-lembut); }

/* Layar sempit atau tegak: soal di atas, dua tim berdampingan di bawahnya */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .bd-meja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .bd-soal { grid-column: 1 / -1; order: -1; }
  .bd-soal__gambar { font-size: 3.4em; }
  .bd-soal__gambar--panjang { font-size: 1.9em; }
  .bd-soal__tanya { font-size: 1.4em; }
  .bd-soal__tanya--panjang { font-size: 1.15em; }
  .bd-soal p.kuis-arab { font-size: 1.5em; }
  .bd-bar__teks { display: none; }
  .bd-bar { gap: .35em; padding: .3em .4em; }
  .bd-pilih { font-size: 1.15em; }
  .bd-pilih--pendek { font-size: 2em; }
  .bd-pilih--panjang { font-size: .92em; }
  .bd-kabar { font-size: 1.15em; }
}

/* Tirai: hitung mundur dan layar pemenang */
.bd-tirai {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 1em;
  background: rgba(43, 29, 63, .74); color: #fff; text-align: center; overflow: hidden;
}
.bd-hitung {
  font-family: var(--huruf-judul); font-weight: 900; font-size: min(34vh, 22vw); line-height: 1;
  text-shadow: 0 .06em 0 var(--kedua); animation: bd-dentum .75s ease-out both;
}
.bd-hasil {
  --tim: var(--utama);
  position: relative; max-width: min(94%, 28em); padding: .8em 1.6em 1.2em;
  background: #fff; color: var(--teks); border: .3em solid var(--tim); border-radius: 1.4em; box-shadow: 0 .6em 2em rgba(0, 0, 0, .35);
  animation: bd-muncul .5s ease;
}
.bd-hasil--biru { --tim: var(--biru); }
.bd-hasil--oranye { --tim: var(--oranye); }
.bd-hasil__emoji { font-size: 4.2em; line-height: 1.1; animation: bd-layang 1.6s ease-in-out infinite; }
.bd-hasil__juara { position: absolute; top: .1em; right: .3em; font-size: 3em; line-height: 1; transform: rotate(12deg); }
.bd-hasil h2 { margin: .1em 0; font-size: 2em; line-height: 1.15; color: var(--tim); }
.bd-hasil h2:focus { outline: none; }
.bd-hasil p { margin: 0; }
.bd-hasil__pesan { font-weight: 700; color: var(--teks-lembut); }
.bd-hasil__skor { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; padding-top: .5em; }
.bd-hasil__tim { padding: .1em .8em; border-radius: 999px; color: #fff; font-weight: 900; font-size: 1.15em; }
.bd-hasil__tim--biru { background: var(--biru); }
.bd-hasil__tim--oranye { background: var(--oranye); }
.bd-hasil .tombol { min-height: 2.8em; font-size: 1.1em; }
.bd-konfeti { position: absolute; inset: 0; pointer-events: none; }
.bd-konfeti span { position: absolute; top: -12%; font-size: 2em; line-height: 1; animation: bd-jatuh 4s linear infinite; }

@keyframes bd-muncul { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } to { transform: scale(1); } }
@keyframes bd-dentum { from { transform: scale(2.4); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 80% { transform: scale(1); opacity: 1; } to { transform: scale(.8); opacity: 0; } }
@keyframes bd-layang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.14em); } }
@keyframes bd-lompat { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-.35em) rotate(-10deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes bd-jatuh { from { transform: translateY(0) rotate(0); } to { transform: translateY(125vh) rotate(540deg); } }

@media (prefers-reduced-motion: reduce) {
  .bd-mode__kartu, .bd-tali__geser, .bd-tali__tim, .bd-jalur__jejak, .bd-jalur__pelari, .bd-rebut__tengah, .bd-opsi { transition: none; }
  .bd-kabar, .bd-hasil, .bd-hasil__emoji, .bd-rebut__tengah, .bd-rebut__slot.terisi, .bd-jalur__pelari.lompat span { animation: none; }
  .bd-hitung { animation: none; }
  .bd-konfeti { display: none; }
}