/* Alesha: "kotak mainan". Kartu tebal seperti balok mainan kayu yang dicat,
   garis tinta tebal seperti buku bergambar, latar kertas krem bertitik. */

:root {
  --kertas: #FFF3DC;
  --titik: #F6DFB4;
  --tinta: #33231A;
  --teks: #33231A;
  --teks-lembut: #6B5444;
  --putih: #FFFDF7;
  --merah: #FF6B5B;
  --kuning: #FFC83D;
  --hijau: #5CC98A;
  --biru: #56AEF2;
  --oranye: #FF9F43;
  --pink: #FF9DBF;
  --ungu: #B59BF2;

  --bayang: 8px;
  --sudut: 30px;
  --garis: 4px;
  --jarak: clamp(10px, 2.2vmin, 22px);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Baloo 2", system-ui, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kertas: #1D2540;
    --titik: #27315A;
    --tinta: #0B1020;
    --teks: #FFF3DC;
    --teks-lembut: #CBBFAE;
    --putih: #2E3962;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--kertas);
  background-image: radial-gradient(var(--titik) 2.5px, transparent 3px);
  background-size: 28px 28px;
  color: var(--teks);
  font-family: var(--font);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button:focus-visible { outline: 4px dashed var(--biru); outline-offset: 6px; }

[hidden] { display: none !important; }

/* ---------- Balok mainan (komponen utama) ---------- */
.mainan {
  position: relative;
  background: var(--c, var(--putih));
  border: var(--garis) solid var(--tinta);
  border-radius: var(--sudut);
  box-shadow:
    0 var(--bayang) 0 var(--tinta),
    inset 0 -10px 0 rgba(0, 0, 0, .10),
    inset 0 8px 0 rgba(255, 255, 255, .35);
  transition: transform .12s ease-out, box-shadow .12s ease-out, opacity .25s, filter .25s;
  color: var(--tinta);
  padding: 0;
}
.mainan:active, .mainan.ditekan {
  transform: translateY(6px);
  box-shadow:
    0 2px 0 var(--tinta),
    inset 0 -6px 0 rgba(0, 0, 0, .10),
    inset 0 6px 0 rgba(255, 255, 255, .35);
}

/* ---------- Bagian atas ---------- */
#atas {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 4px;
}
.bulat {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: var(--garis) solid var(--tinta);
  background: var(--kuning);
  box-shadow: 0 6px 0 var(--tinta);
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  transition: transform .12s, box-shadow .12s;
}
.bulat:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tinta); }
.bulat svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bulat.kecil {
  width: 52px;
  height: 52px;
  background: var(--putih);
  opacity: .75;
  box-shadow: 0 4px 0 var(--tinta);
}
.bulat.kecil svg { stroke: var(--teks-lembut); }
/* Cincin tahan 3 detik */
.bulat.kecil::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(var(--hijau) calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  pointer-events: none;
}
.bulat.kecil.menahan { opacity: 1; }

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 10px;
  border: var(--garis) solid var(--tinta);
  border-radius: 999px;
  background: var(--c, var(--putih));
  color: var(--tinta);
  font-size: clamp(16px, 2.6vmin, 24px);
  box-shadow: 0 4px 0 var(--tinta);
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip .e { font-size: 1.5em; line-height: 1; }

/* ---------- Area utama ---------- */
main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--jarak) 16px calc(var(--jarak) + 8px);
  gap: var(--jarak);
}
.panggung {
  flex: 1;
  min-height: 0;
  position: relative;
}
.kisi {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--kol, 2), var(--uk, 140px));
  grid-auto-rows: var(--uk, 140px);
  gap: var(--jarak);
  justify-content: center;
  align-content: center;
  padding-bottom: var(--bayang);
}

.kartu {
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqh;
  overflow: visible;
}
.kartu .e {
  font-size: 52cqmin;
  line-height: 1;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15));
  pointer-events: none;
}
.kartu.berlabel .e { font-size: 44cqmin; }
.kartu .label {
  font-size: max(15px, 11cqmin);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  pointer-events: none;
}
.kartu .label small {
  display: block;
  font-size: .72em;
  font-weight: 700;
  opacity: .7;
}

/* Kartu yang tidak dipilih saat memberi petunjuk */
.kartu.redup { opacity: .35; filter: saturate(.4); }
.kartu.benar { animation: lompat .6s ease-out; }
.kartu.petunjuk { animation: denyut 1s ease-in-out infinite; z-index: 2; }
.kartu.petunjuk::before {
  content: "👇";
  position: absolute;
  top: -0.9em;
  left: 50%;
  font-size: max(36px, 22cqmin);
  transform: translateX(-50%);
  animation: tunjuk .8s ease-in-out infinite;
}
.kartu.dihitung::after {
  content: attr(data-n);
  position: absolute;
  top: -14px;
  right: -14px;
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  border-radius: 999px;
  border: var(--garis) solid var(--tinta);
  background: var(--kuning);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  animation: muncul .3s ease-out;
}

/* ---------- Gelembung pertanyaan ---------- */
.gelembung {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 24px;
  max-width: 100%;
  background: var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--tinta);
  font-size: clamp(22px, 4.6vmin, 44px);
  font-weight: 900;
  line-height: 1.1;
}
.gelembung .teks { min-width: 0; }
.gelembung .bulat { width: 60px; height: 60px; flex: none; background: var(--biru); }

/* Angka besar penghitung */
.hitungan {
  flex: none;
  align-self: center;
  font-size: clamp(48px, 11vmin, 110px);
  font-weight: 900;
  line-height: 1;
  min-height: 1em;
  color: var(--teks);
  -webkit-text-stroke: 0;
}
.angka .e {
  font-size: 50cqmin;
  font-weight: 900;
  line-height: 1;
}
.angka .titik {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3cqmin;
  width: 80%;
}
.angka .titik i {
  width: 9cqmin;
  height: 9cqmin;
  border-radius: 50%;
  background: var(--tinta);
}

/* ---------- Layar mulai ---------- */
.mulai {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vmin, 40px);
  text-align: center;
}
.nama-app {
  margin: 0;
  font-size: clamp(64px, 16vmin, 150px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  display: flex;
}
.nama-app span {
  display: inline-block;
  color: var(--c);
  -webkit-text-stroke: 3px var(--tinta);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--tinta);
  animation: ayun 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .15s);
}
.tombol-mulai {
  width: clamp(170px, 34vmin, 280px);
  height: clamp(170px, 34vmin, 280px);
  border-radius: 50%;
  --c: var(--hijau);
  display: grid;
  place-items: center;
  animation: napas 2s ease-in-out infinite;
}
.tombol-mulai svg { width: 48%; height: 48%; fill: var(--putih); stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; margin-left: 8%; }
.sub {
  margin: 0;
  font-size: clamp(20px, 3.6vmin, 32px);
  color: var(--teks-lembut);
}
.catatan {
  margin: 0;
  max-width: 34em;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--teks-lembut);
}

/* ---------- Beranda ---------- */
.ubin {
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqh;
}
.ubin .e { font-size: 42cqmin; line-height: 1; pointer-events: none; }
.ubin .label { font-size: max(20px, 13cqmin); font-weight: 900; pointer-events: none; }

/* ---------- Doa ---------- */
.doa {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 16px;
  text-align: center;
}
.doa .e { font-size: clamp(70px, 16vmin, 140px); line-height: 1; }
.doa h2 { margin: 0; font-size: clamp(26px, 5vmin, 44px); font-weight: 900; }
.doa .arab {
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Amiri", serif;
  font-size: clamp(30px, 6.4vmin, 58px);
  line-height: 1.9;
  font-weight: 600;
  direction: rtl;
  max-width: 22em;
  padding: 10px 24px;
  background: var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--tinta);
  color: var(--teks);
}
.doa .latin { margin: 4px 0 0; font-size: clamp(18px, 3.4vmin, 28px); font-style: italic; max-width: 30em; }
.doa .arti { margin: 0; font-size: clamp(16px, 2.8vmin, 22px); font-weight: 600; color: var(--teks-lembut); max-width: 34em; line-height: 1.45; }
.doa .sumber { font-size: 14px; font-weight: 600; color: var(--teks-lembut); }
.peringatan {
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 10px;
  background: #FFE1A8;
  color: #6B3D00;
  border: 2px solid #E0A23B;
}

/* ---------- Pesta dan misi ---------- */
.misi {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vmin, 28px);
  text-align: center;
  padding: 0 8px;
}
.misi .e { font-size: clamp(90px, 22vmin, 200px); line-height: 1; animation: ayun 2.4s ease-in-out infinite; }
.misi h2 { margin: 0; font-size: clamp(34px, 8vmin, 72px); font-weight: 900; line-height: 1; }
.misi .tugas {
  margin: 0;
  max-width: 18em;
  padding: 18px 26px;
  font-size: clamp(22px, 4.4vmin, 40px);
  font-weight: 800;
  line-height: 1.25;
  background: var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--tinta);
}
.misi .label-kecil { font-size: clamp(16px, 2.8vmin, 22px); color: var(--teks-lembut); margin: 0; }
.tombol-besar {
  --c: var(--hijau);
  min-width: 220px;
  min-height: 88px;
  padding: 0 34px;
  font-size: clamp(24px, 4.4vmin, 36px);
  font-weight: 900;
}

#pesta { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
#pesta i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border: 3px solid var(--tinta);
  background: var(--c);
  border-radius: var(--r, 50%);
  animation: tebar 1.2s cubic-bezier(.15, .7, .3, 1) forwards;
}

/* Spanduk "ajak orang tua" */
.ajak {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 5;
  max-width: min(92%, 640px);
  padding: 12px 20px;
  background: var(--kuning);
  color: var(--tinta);
  border: var(--garis) solid var(--tinta);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--tinta);
  font-size: clamp(17px, 3vmin, 24px);
  font-weight: 800;
  text-align: center;
  animation: muncul .35s ease-out;
}

/* ---------- Pintu orang tua (modal) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 14, 10, .55);
}
.modal .isi {
  width: min(380px, 100%);
  padding: 22px;
  background: var(--kertas);
  border: var(--garis) solid var(--tinta);
  border-radius: 26px;
  box-shadow: 0 8px 0 var(--tinta);
  text-align: center;
}
.modal h2 { margin: 0 0 4px; font-size: 22px; }
.modal .soal { font-size: 40px; font-weight: 900; margin: 6px 0; }
.modal .jawab {
  min-height: 52px;
  font-size: 34px;
  font-weight: 900;
  border-bottom: 3px solid var(--tinta);
  margin: 0 auto 14px;
  width: 120px;
}
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pad button {
  min-height: 58px;
  border-radius: 16px;
  font-size: 26px;
  font-weight: 900;
  --bayang: 4px;
  --sudut: 16px;
  --garis: 3px;
}
.modal .baris { display: flex; gap: 10px; margin-top: 12px; }
.modal .baris button { flex: 1; min-height: 52px; border-radius: 16px; font-size: 18px; --bayang: 4px; --garis: 3px; }
.modal { overflow-y: auto; }
/* Layar pendek (iPhone lanskap): soal di kiri, papan angka di kanan */
@media (max-height: 520px) {
  .modal .isi {
    width: min(640px, 100%);
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas: "judul pad" "soal pad" "jawab pad" "baris pad";
    column-gap: 18px;
    align-items: center;
  }
  .modal h2 { grid-area: judul; font-size: 18px; }
  .modal .soal { grid-area: soal; font-size: 32px; margin: 0; }
  .modal .jawab { grid-area: jawab; margin-bottom: 0; }
  .modal .pad { grid-area: pad; gap: 8px; }
  .modal .baris { grid-area: baris; }
  .pad button { min-height: 52px; }
}

/* ---------- Area orang tua (untuk dewasa: ukuran biasa) ---------- */
.ortu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-user-select: text;
  user-select: text;
  font-weight: 600;
  padding: 4px 2px 24px;
}
.ortu-dalam { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ortu h1 { margin: 0; font-size: 28px; font-weight: 900; }
.ortu h2 { margin: 0 0 10px; font-size: 19px; font-weight: 900; }
.ortu section {
  background: var(--putih);
  border: 3px solid var(--tinta);
  border-radius: 20px;
  padding: 16px;
}
.ortu p { margin: 6px 0; line-height: 1.5; }
.ortu .lembut { color: var(--teks-lembut); font-size: 15px; }
.pilihan { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan button, .ortu .aksi {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  border: 3px solid var(--tinta);
  background: var(--kertas);
  font-weight: 800;
  font-size: 16px;
}
.pilihan button[aria-pressed="true"] { background: var(--kuning); color: var(--tinta); }
.ortu .aksi.utama { background: var(--hijau); color: var(--tinta); }
.daftar-chip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.daftar-chip span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--tinta);
  font-size: 15px;
  background: var(--kertas);
}
.ortu ol { margin: 6px 0; padding-left: 22px; line-height: 1.55; }
.ortu table { border-collapse: collapse; width: 100%; font-size: 15px; }
.ortu td { padding: 6px 4px; border-bottom: 1px solid var(--titik); }

/* Layar pendek (iPhone lanskap): header dan gelembung diringkas supaya kartu tetap besar */
@media (max-height: 500px) {
  #atas { padding: 6px 12px 0; }
  .bulat { width: 54px; height: 54px; }
  .bulat.kecil { width: 46px; height: 46px; }
  .chip { padding: 4px 14px 4px 8px; font-size: 16px; }
  main { padding-top: 8px; gap: 8px; }
  .gelembung { padding: 4px 6px 4px 18px; font-size: 22px; box-shadow: 0 4px 0 var(--tinta); }
  .gelembung .bulat { width: 44px; height: 44px; }
  .hitungan { font-size: 40px; }
}

/* ---------- Gerak ---------- */
@keyframes lompat {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-18%) scale(1.08) rotate(-4deg); }
  60% { transform: translateY(0) scale(.96) rotate(3deg); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes goyang {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
@keyframes denyut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes tunjuk {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 12px); }
}
@keyframes muncul {
  from { transform: translateX(var(--tx, 0)) scale(.4); opacity: 0; }
  to { transform: translateX(var(--tx, 0)) scale(1); opacity: 1; }
}
.ajak { --tx: -50%; }
@keyframes ayun {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes napas {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes tebar {
  0% { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #pesta { display: none; }
}

/* =====================================================================
   Versi 2: permainan, cerita, syair, adab, sekolah, suara keluarga
   ===================================================================== */

.ubin .label { font-size: max(17px, 12cqmin); text-align: center; line-height: 1.05; padding: 0 8%; }
.label-kecil { font-size: clamp(15px, 2.6vmin, 20px); color: var(--teks-lembut); margin: 0; font-weight: 700; }
.tengah { text-align: center; }
.baris-tombol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(10px, 2.4vmin, 22px); flex: none; }
.baris-tombol .tombol-besar { min-width: 0; padding: 0 26px; }

/* Masuk dan pergantian */
.masuk { animation: muncul-adegan .45s ease-out; }
.masuk2 { animation: muncul .35s ease-out; }
@keyframes muncul-adegan {
  from { transform: scale(.6) rotate(-6deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- Bayangan ---------- */
.bayangan-besar {
  flex: none;
  align-self: center;
  font-size: clamp(70px, 19vmin, 170px);
  line-height: 1.05;
  filter: brightness(0) opacity(.78);
  transition: filter .5s ease;
}
.bayangan-besar.terang { filter: none; }

/* ---------- Cilukba ---------- */
.kartu.tutup .e { opacity: 0; transform: scale(.4); transition: opacity .3s .1s, transform .35s .1s; }
.kartu .kain {
  position: absolute;
  inset: calc(var(--garis) * -1);
  display: grid;
  place-items: center;
  font-size: 46cqmin;
  background: var(--c);
  border: var(--garis) solid var(--tinta);
  border-radius: var(--sudut);
  background-image: radial-gradient(rgba(255, 255, 255, .45) 3px, transparent 3.5px);
  background-size: 22px 22px;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .35s;
  pointer-events: none;
}
.kartu.terbuka .e { opacity: 1; transform: scale(1); }
.kartu.terbuka .kain { transform: translateY(-115%) rotate(-12deg); opacity: 0; }

/* ---------- Pasangan ---------- */
.kartu.balik .e { opacity: 0; transition: opacity .2s; }
.kartu.balik .punggung {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 40cqmin;
  border-radius: calc(var(--sudut) - 4px);
  background: var(--ungu);
  background-image: radial-gradient(rgba(255, 255, 255, .4) 3px, transparent 3.5px);
  background-size: 20px 20px;
  transition: opacity .2s, transform .25s;
  pointer-events: none;
}
.kartu.balik.buka .e { opacity: 1; }
.kartu.balik.buka .punggung { opacity: 0; transform: scale(.7); }
.kartu.balik.cocok { box-shadow: 0 var(--bayang) 0 var(--tinta), 0 0 0 6px var(--hijau); }

/* ---------- Sortir ---------- */
.sortir-benda {
  flex: none;
  align-self: center;
  font-size: clamp(76px, 20vmin, 170px);
  line-height: 1.05;
  transition: transform .45s ease-in, opacity .45s ease-in;
}
.sortir-benda.masuk { transform: translateY(45%) scale(.35); opacity: 0; animation: none; }
.keranjang.kecil .e { font-size: 26cqmin; }

/* ---------- Gelembung ---------- */
.kolam { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; }
.busa {
  position: absolute;
  top: 100%;
  width: var(--uk);
  height: var(--uk);
  padding: 0;
  border-radius: 50%;
  border: 3px solid rgba(51, 35, 26, .55);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .95) 0 12%, transparent 13%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15) 55%, rgba(86, 174, 242, .45) 72%, rgba(181, 155, 242, .55) 100%);
  display: grid;
  place-items: center;
  animation: naik linear forwards;
}
.busa .e { font-size: calc(var(--uk) * .5); line-height: 1; pointer-events: none; }
.busa.pop { animation: pecah .28s ease-out forwards !important; }
@keyframes naik {
  0% { transform: translate(0, 0); }
  50% { transform: translate(14px, calc(var(--naik) * .5)); }
  100% { transform: translate(-8px, var(--naik)); }
}
@keyframes pecah {
  to { transform: scale(1.5); opacity: 0; }
}

/* ---------- Mewarnai ---------- */
.warnai { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--jarak); }
.kanvas-wadah {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  background: var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--tinta);
  padding: 8px;
}
.kanvas { width: 100%; height: 100%; max-height: 100%; }
.kanvas .bagian {
  fill: #FFFDF7;
  stroke: #33231A;
  stroke-width: 4;
  stroke-linejoin: round;
  transition: fill .2s;
  cursor: pointer;
}
.sisi { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--jarak); }
.palet { display: grid; grid-template-columns: repeat(6, auto); gap: clamp(8px, 2vmin, 16px); justify-content: center; }
.krayon {
  width: clamp(52px, 12vmin, 92px);
  height: clamp(52px, 12vmin, 92px);
  border-radius: 50%;
  border: var(--garis) solid var(--tinta);
  background: var(--c);
  box-shadow: 0 5px 0 var(--tinta);
  padding: 0;
  transition: transform .12s;
}
.krayon[aria-pressed="true"] { transform: translateY(-6px) scale(1.08); box-shadow: 0 5px 0 var(--tinta), 0 0 0 5px var(--putih), 0 0 0 9px var(--tinta); }
@media (orientation: portrait) and (max-width: 520px) {
  .palet { grid-template-columns: repeat(3, auto); }
  .krayon { width: 72px; height: 72px; }
}
@media (orientation: landscape) {
  .warnai { flex-direction: row; }
  .sisi { justify-content: center; }
  .palet { grid-template-columns: repeat(2, auto); }
  .aksi-warnai { flex-direction: column; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .palet { grid-template-columns: repeat(3, auto); }
  .krayon { width: 60px; height: 60px; }
  .aksi-warnai .tombol-besar { min-height: 60px; font-size: 20px; }
}

/* ---------- Tepuk irama ---------- */
.titik-irama { flex: none; display: flex; justify-content: center; gap: 16px; min-height: 40px; }
.titik-irama i {
  width: clamp(30px, 6vmin, 52px);
  height: clamp(30px, 6vmin, 52px);
  border-radius: 50%;
  border: var(--garis) solid var(--tinta);
  background: var(--putih);
  transition: background .15s, transform .15s;
}
.titik-irama i.nyala { background: var(--oranye); transform: scale(1.12); }
.panggung.tengah { display: grid; place-items: center; }
.tangan-besar {
  width: min(62vmin, 340px);
  height: min(62vmin, 340px);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.tangan-besar .e { font-size: min(30vmin, 170px); line-height: 1; pointer-events: none; }
.tangan-besar.benar { animation: lompat .35s ease-out; }

/* ---------- Gerak dan instruksi ---------- */
.perintah {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vmin, 40px);
}
.langkah {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(14px, 3vmin, 28px) clamp(18px, 4vmin, 36px);
  background: var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: 30px;
  box-shadow: 0 6px 0 var(--tinta);
  max-width: 100%;
}
.langkah .e { font-size: clamp(70px, 20vmin, 180px); line-height: 1; }
.langkah .teks { font-size: clamp(22px, 4.6vmin, 42px); font-weight: 900; text-align: center; }

/* ---------- Cerita ---------- */
.cerita {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vmin, 28px);
  text-align: center;
}
.cerita.ringkas { flex: none; gap: 8px; }
.adegan {
  font-size: clamp(80px, 24vmin, 220px);
  line-height: 1.05;
  background: none;
  border: 0;
  padding: 0;
  letter-spacing: -.04em;
}
.adegan.sedang { font-size: clamp(54px, 14vmin, 130px); }
.narasi {
  margin: 0;
  max-width: 20em;
  padding: 16px 24px;
  font-size: clamp(22px, 4.4vmin, 40px);
  font-weight: 800;
  line-height: 1.25;
  background: var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--tinta);
}
.cerita.ringkas .narasi { font-size: clamp(19px, 3.6vmin, 32px); padding: 10px 20px; }
.halaman-titik { display: flex; gap: 8px; }
.halaman-titik i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--putih); }
.halaman-titik i.nyala { background: var(--hijau); }
.tombol-lanjut {
  width: clamp(88px, 16vmin, 120px);
  height: clamp(88px, 16vmin, 120px);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.tombol-lanjut svg { width: 56%; height: 56%; fill: none; stroke: var(--tinta); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Syair ---------- */
.syair {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vmin, 22px);
  text-align: center;
}
.syair .e { font-size: clamp(60px, 14vmin, 130px); line-height: 1; animation: ayun 2.4s ease-in-out infinite; }
.bait {
  padding: 14px 26px;
  background: var(--putih);
  border: var(--garis) solid var(--tinta);
  border-radius: 28px;
  box-shadow: 0 6px 0 var(--tinta);
}
.baris-syair {
  margin: 4px 0;
  font-size: clamp(20px, 4vmin, 38px);
  font-weight: 800;
  line-height: 1.3;
  padding: 2px 12px;
  border-radius: 12px;
  transition: background .2s, transform .2s;
}
.baris-syair.nyala { background: var(--kuning); color: var(--tinta); transform: scale(1.04); }

/* ---------- Adab ---------- */
.doa .arti.kuat { color: var(--teks); font-weight: 800; font-size: clamp(18px, 3.4vmin, 28px); }
.doa .latihan {
  margin: 0;
  padding: 10px 20px;
  border-radius: 20px;
  background: var(--kuning);
  color: var(--tinta);
  border: 3px solid var(--tinta);
  font-size: clamp(18px, 3.4vmin, 28px);
  font-weight: 900;
}

/* ---------- Area orang tua: tambahan ---------- */
.ortu h3 { margin: 14px 0 4px; font-size: 16px; font-weight: 900; }
.ortu ul { margin: 6px 0; padding-left: 22px; line-height: 1.55; }
.ortu details { margin-top: 10px; }
.ortu summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.ortu .info {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--kuning);
  color: var(--tinta);
  border: 3px solid var(--tinta);
  font-weight: 800;
}
.rek-daftar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rek-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--titik);
}
.rek-nama { font-weight: 800; }
.rek-nama small {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hijau);
  color: var(--tinta);
  font-size: 12px;
}
.rek-aksi { display: flex; flex-wrap: wrap; gap: 6px; }
.ortu .aksi:disabled { opacity: .45; }
.ortu .aksi.merekam { background: var(--merah); color: var(--tinta); animation: denyut 1s ease-in-out infinite; }

@media (max-height: 500px) {
  .bayangan-besar, .sortir-benda { font-size: 64px; }
  .adegan { font-size: 76px; }
  .adegan.sedang { font-size: 48px; }
  .narasi { padding: 8px 18px; font-size: 20px; }
  .cerita.ringkas .narasi { font-size: 17px; padding: 6px 14px; }
  .langkah { padding: 8px 18px; gap: 2px; }
  .langkah .e { font-size: 50px; }
  .langkah .teks { font-size: 20px; }
  .baris-tombol .tombol-besar { min-height: 88px; font-size: 22px; }
  .tombol-lanjut { width: 88px; height: 88px; }
  .syair .e { display: none; }
  .baris-syair { font-size: 18px; margin: 1px 0; }
  .titik-irama { min-height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .busa { animation: none !important; top: var(--atas); }
  .busa.pop { opacity: 0; }
}

/* Pilih tema: tema yang sedang aktif ditandai */
.ubin.aktif { box-shadow: 0 var(--bayang) 0 var(--tinta), 0 0 0 6px var(--putih), 0 0 0 10px var(--tinta); }
button.chip { cursor: pointer; font-weight: 800; min-height: 52px; }
button.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.ubin-tema { gap: 3cqh; padding: 6px; }
.ubin-tema .e { font-size: 32cqmin; }
.ubin-tema .label { font-size: max(14px, 11cqmin); padding: 0 4%; }