/* =====================================================================
   Antarmuka anak.

   Pagar desain yang tidak boleh dilanggar:
   - target sentuh minimal 64 px (kira-kira 1,5 cm di tablet 10 inci)
   - tidak ada teks yang harus dibaca anak untuk bisa melanjutkan
   - tidak ada hitungan mundur yang menekan
   - tidak ada skor atau peringkat antar anak
   - kontras tinggi, animasi seperlunya
   ===================================================================== */

:root {
  --warna-misi: #2E6F63;
  --kertas: #F6F7F3;
  --permukaan: #FFFFFF;
  --tinta: #1B2620;
  --tinta-lembut: #55645C;
  --garis: #DDE3DB;
  --radius: 18px;
  --bayang: 0 2px 4px rgba(27, 38, 32, .06), 0 14px 32px -20px rgba(27, 38, 32, .35);
  font-size: clamp(17px, 1.7vw, 21px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--kertas);
  color: var(--tinta);
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
}

.layar {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
}

.panggung {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 26px);
  text-align: center;
}

.tahap-label {
  margin: 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warna-misi);
}

.tahap-judul {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.18;
  text-wrap: balance;
  max-width: 22ch;
}

.naskah {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--tinta-lembut);
  max-width: 46ch;
}

.catatan-kecil { margin: 0; font-size: .82rem; color: var(--tinta-lembut); }
.galat { margin: 0; color: #9E4034; font-weight: 700; }

/* ---------- adegan ---------- */
.adegan {
  width: min(520px, 92%);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--permukaan);
  box-shadow: var(--bayang);
}
.adegan svg, .adegan-gambar { display: block; width: 100%; height: auto; }

.logo-besar { width: 132px; }
.logo-besar svg { width: 100%; height: auto; }
.judul-buka { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }

/* ---------- tombol ---------- */
.tombol-utama {
  min-height: 72px;
  min-width: 240px;
  padding: 0 40px;
  border: 0;
  border-radius: 999px;
  background: var(--warna-misi);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--bayang);
  transition: transform .12s ease, filter .12s ease;
}
.tombol-utama:active { transform: scale(.97); filter: brightness(.94); }
.tombol-besar { min-height: 96px; font-size: 1.35rem; }

.tombol-teks {
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-lembut);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

.tombol-ulang {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 0 26px;
  border: 2px solid var(--warna-misi);
  border-radius: 999px;
  background: transparent;
  color: var(--warna-misi);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tombol-ulang svg { width: 22px; height: 22px; }

:focus-visible { outline: 3px solid var(--warna-misi); outline-offset: 3px; }

/* ---------- pilihan refleksi ---------- */
.opsi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  width: 100%;
}
.opsi-tombol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 190px;
  padding: 20px 14px;
  border: 2px solid var(--garis);
  border-radius: var(--radius);
  background: var(--permukaan);
  font: inherit;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.opsi-tombol:active { transform: scale(.97); }
.opsi-tombol.terpilih { border-color: var(--warna-misi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warna-misi) 22%, transparent); }
.opsi-ikon { width: 96px; }
.opsi-ikon svg { width: 100%; height: auto; }
.opsi-label { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--tinta); }

/* ---------- kartu instruksi aksi nyata (dibaca guru) ---------- */
.kartu-aksi {
  width: min(560px, 100%);
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--radius);
  border-left: 5px solid var(--warna-misi);
  background: var(--permukaan);
  box-shadow: var(--bayang);
}
.kartu-aksi-judul { margin: 0 0 8px; font-weight: 800; font-size: 1rem; color: var(--warna-misi); }
.kartu-aksi-teks  { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--tinta-lembut); }
.kartu-aksi-alat  { margin: 10px 0 0; font-size: .85rem; color: var(--tinta-lembut); }

/* ---------- daftar anak & misi ---------- */
.daftar-anak {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  width: 100%;
}
.kartu-anak {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 150px; padding: 18px 10px;
  border: 2px solid var(--garis); border-radius: var(--radius);
  background: var(--permukaan); font: inherit; cursor: pointer;
}
.kartu-anak:active { transform: scale(.97); }
.kartu-anak-avatar {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--warna-misi) 16%, transparent);
  color: var(--warna-misi); font-size: 1.9rem; font-weight: 800;
}
.kartu-anak-nama { font-weight: 700; font-size: 1rem; }

.daftar-misi { display: flex; flex-direction: column; gap: 12px; width: min(520px, 100%); }
.kartu-misi {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 76px; padding: 16px 20px; text-align: left;
  border: 1px solid var(--garis); border-radius: var(--radius);
  background: var(--permukaan); font: inherit; cursor: pointer;
}
.kartu-misi-judul { font-weight: 800; font-size: 1.05rem; }
.kartu-misi-meta  { font-size: .82rem; color: var(--tinta-lembut); }

/* Misi yang sedimensi dengan tema minggu berjalan. Ditandai dengan garis tepi
   kiri, bukan warna latar, supaya tetap terbaca pada tablet yang layarnya
   pudar terkena cahaya ruang kelas. */
.kartu-misi-tema { border-left: 5px solid var(--warna-misi); }

.panggung-guru .tahap-judul { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.isian-kode {
  width: min(340px, 100%); min-height: 68px; padding: 0 20px;
  border: 2px solid var(--garis); border-radius: var(--radius);
  background: var(--permukaan); font: inherit; font-size: 1.3rem;
  font-weight: 700; text-align: center; letter-spacing: .08em;
}

.stempel { width: 200px; }

/* ---------- lencana status ---------- */
.lencana {
  position: fixed; top: 10px; right: 12px; z-index: 10;
  padding: 5px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--permukaan); border: 1px solid var(--garis); color: var(--tinta-lembut);
}
.lencana.aman    { color: #2E6F63; border-color: #BEDCD3; }
.lencana.menunggu{ color: #8F6217; border-color: #EBDCBB; }
.lencana.luring  { color: #9E4034; border-color: #EBC9C2; }

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