/* DuniaMisi Cerita Hari Pertama
   Gaya skrin penuh, kad krim bulat, sasaran sentuh besar untuk kanak kanak. */

:root {
  --krim: #fff9ef;
  --krim-tua: #fdeed3;
  --dakwat: #26324a;
  --dakwat-lembut: #5a6a86;
  --teal: #0d6e5f;
  --teal-gelap: #0a5546;
  --oren: #f59e0b;
  --garis: #f0dcba;
  --betul: #2e9e5b;
  --jari: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #123c36;
}

body {
  font-family: "Baloo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--dakwat);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible {
  outline: 3px solid var(--oren);
  outline-offset: 2px;
}

/* ---------- Skrin dan latar ---------- */

.skrin {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
}

.skrin[hidden] { display: none; }

.latar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.lapisan-gelap {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 43, 38, 0.72) 0%, rgba(10, 43, 38, 0.18) 46%, rgba(10, 43, 38, 0.05) 70%);
}

.lapisan-gelap.nipis {
  background: linear-gradient(to top, rgba(10, 43, 38, 0.55), rgba(10, 43, 38, 0.08) 60%);
}

/* ---------- Kad asas ---------- */

.kad {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  max-height: 74dvh;
  overflow-y: auto;
  background: linear-gradient(to bottom, #fffdf7, var(--krim));
  border: 2px solid var(--garis);
  border-radius: var(--jari);
  box-shadow: 0 18px 40px rgba(9, 38, 33, 0.35);
  padding: 20px 20px 22px;
}

.kad h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--teal-gelap);
}

/* ---------- Skrin tajuk ---------- */

.kad-tajuk {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(26px + env(safe-area-inset-bottom));
  text-align: center;
  color: #fff;
}

.jenama {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffe1a8;
}

.kad-tajuk h1 {
  margin: 4px 0 2px;
  font-size: clamp(2.3rem, 9vw, 3.6rem);
  line-height: 1.05;
  text-shadow: 0 3px 14px rgba(6, 32, 28, 0.55);
}

.sari-kata {
  margin: 0 0 20px;
  font-size: 1.12rem;
  font-weight: 600;
  color: #fdf3dd;
  text-shadow: 0 2px 8px rgba(6, 32, 28, 0.5);
}

/* ---------- Butang ---------- */

.butang-utama {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 14px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(to bottom, #12836e, var(--teal));
  color: #fff;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px rgba(9, 60, 50, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.butang-utama:active { transform: scale(0.98); }

.butang-kedua {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 10px;
  padding: 10px 20px;
  border: 2.5px solid var(--teal);
  border-radius: 999px;
  background: #fff;
  color: var(--teal-gelap);
  font-size: 1.08rem;
  font-weight: 800;
}

.butang-hantu {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: #ffe9c4;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.butang-hantu.gelap { color: var(--teal-gelap); }

/* ---------- Skrin cipta hero ---------- */

.kad-hero { text-align: center; }

.pratonton {
  width: 132px;
  height: 132px;
  margin: 2px auto 6px;
}

.pratonton svg { width: 100%; height: 100%; }

.label-besar {
  display: block;
  margin: 16px 0 8px;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--dakwat);
  text-align: left;
}

p.label-besar { margin-bottom: 8px; }

.input-nama {
  width: 100%;
  min-height: 58px;
  padding: 10px 16px;
  border: 2.5px solid var(--garis);
  border-radius: 16px;
  background: #fff;
  color: var(--dakwat);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
}

.teks-bantuan {
  margin: 6px 2px 0;
  font-size: 0.92rem;
  color: var(--dakwat-lembut);
  text-align: left;
}

.baris-pilihan {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pilihan-rupa {
  min-width: 56px;
  min-height: 56px;
  padding: 6px 12px;
  border: 3px solid var(--garis);
  border-radius: 16px;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dakwat);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pilihan-rupa[aria-pressed="true"] {
  border-color: var(--teal);
  background: #e4f4ef;
  box-shadow: 0 0 0 2px var(--teal) inset;
}

.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(38, 50, 74, 0.18);
  flex: none;
}

.mini-avatar { width: 40px; height: 40px; flex: none; }
.mini-avatar svg { width: 100%; height: 100%; }

/* ---------- Bar atas pemain cerita ---------- */

.bar-atas {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 3;
}

.butang-ikon {
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 249, 239, 0.94);
  color: var(--teal-gelap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 6px 16px rgba(9, 38, 33, 0.3);
}

.butang-ikon svg { width: 24px; height: 24px; }

.titik-maju {
  display: flex;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(13, 51, 45, 0.45);
}

.titik {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.titik.siap { background: var(--oren); }
.titik.kini {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* ---------- Kad dialog ---------- */

.kepala-dialog {
  display: flex;
  align-items: center;
  gap: 11px;
}

.avatar-penutur {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.avatar-penutur svg { width: 100%; height: 100%; }

.nama-penutur {
  margin: 0;
  flex: 1;
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--teal-gelap);
}

.butang-dengar {
  width: 52px;
  height: 52px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: var(--krim-tua);
  color: var(--teal-gelap);
  display: flex;
  align-items: center;
  justify-content: center;
}

.butang-dengar svg { width: 26px; height: 26px; }

.teks-dialog {
  margin: 12px 0 4px;
  font-size: 1.28rem;
  line-height: 1.45;
  font-weight: 600;
}

/* ---------- Pilihan ---------- */

.zon-pilihan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.zon-pilihan:empty { margin-top: 0; }

.butang-pilihan {
  width: 100%;
  min-height: 58px;
  padding: 12px 18px;
  border: 2.5px solid var(--garis);
  border-radius: 18px;
  background: #fff;
  color: var(--dakwat);
  font-size: 1.16rem;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 10px rgba(120, 84, 20, 0.08);
}

.butang-pilihan:active { transform: scale(0.99); }

.butang-pilihan .bulatan-huruf {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--krim-tua);
  color: var(--teal-gelap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
}

.butang-pilihan.betul {
  border-color: var(--betul);
  background: #e7f7ee;
}

.butang-pilihan.boleh {
  border-color: var(--oren);
  background: #fff6df;
  animation: denyut-boleh 0.72s ease-in-out 1;
}

@keyframes denyut-boleh {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  35% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.38); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.butang-pilihan.goncang {
  animation: goncang 0.42s ease;
}

@keyframes goncang {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.avatar-penutur.lompat {
  animation: lompat 0.62s ease;
}

@keyframes lompat {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-10px) scale(1.07); }
  65% { transform: translateY(2px) scale(0.98); }
}

#lapisan-letup {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}

.zarah-bintang {
  position: absolute;
  clip-path: polygon(50% 0%, 62% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 38% 35%);
  pointer-events: none;
}

/* ---------- Tag penerangan ---------- */

.tag-penerangan {
  margin: 12px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: #fdf0c8;
  border: 2px solid var(--oren);
  color: #8a5a00;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.tag-penerangan[hidden] { display: none; }

.tag-penerangan svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.butang-pilihan.besar-huruf { justify-content: center; }
.butang-pilihan.besar-huruf .teks-pilihan {
  font-size: 2rem;
  font-weight: 800;
}

.zon-barang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.butang-barang {
  min-height: 64px;
  padding: 12px 10px;
  border: 2.5px solid var(--garis);
  border-radius: 18px;
  background: #fff;
  color: var(--dakwat);
  font-size: 1.12rem;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.butang-barang .bentuk {
  width: 26px;
  height: 26px;
  flex: none;
}

.kiraan-beg {
  margin: 12px 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--teal-gelap);
  text-align: center;
}

/* ---------- Kad pengesahan ---------- */

.kad-sah { text-align: left; z-index: 5; }
.kad-sah[hidden] { display: none; }

/* ---------- Skrin tamat ---------- */

.bintang-hiasan {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 26px;
  pointer-events: none;
}

.bintang-hiasan svg {
  width: 44px;
  height: 44px;
  fill: #ffd76a;
  filter: drop-shadow(0 4px 8px rgba(9, 38, 33, 0.4));
  animation: terapung 2.6s ease-in-out infinite;
}

.bintang-hiasan svg:nth-child(2) { width: 58px; height: 58px; animation-delay: 0.4s; }
.bintang-hiasan svg:nth-child(3) { animation-delay: 0.8s; }

@keyframes terapung {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-11px) rotate(5deg); }
}

.kad-tamat { text-align: center; }

.zon-lencana {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 16px 0 6px;
  flex-wrap: wrap;
}

.lencana { width: 108px; }

.lencana .bulatan-lencana {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9ad, var(--oren));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(146, 96, 10, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.55);
}

.lencana svg {
  width: 52px;
  height: 52px;
  stroke: #7a4d05;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lencana p {
  margin: 8px 0 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal-gelap);
}

.nota-ibu-bapa {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 16px;
  background: #eef6f3;
  border: 2px solid #cfe6dd;
  text-align: left;
}

.nota-ibu-bapa h3 {
  margin: 0 0 5px;
  font-size: 1.02rem;
  color: var(--teal-gelap);
}

.nota-ibu-bapa p {
  margin: 0;
  font-size: 0.99rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--dakwat);
}

/* ---------- Skrin lebar ---------- */

@media (min-width: 700px) {
  .kad {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(580px, calc(100vw - 48px));
    bottom: 26px;
  }

  .kad-tajuk {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(620px, calc(100vw - 48px));
  }
}

@media (max-height: 480px) {
  .kad { max-height: 86dvh; }
  .teks-dialog { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bintang-hiasan svg { animation: none; }
  .butang-utama:active, .butang-pilihan:active { transform: none; }
  .butang-pilihan.goncang, .avatar-penutur.lompat { animation: none; }
  .butang-pilihan.boleh {
    animation: none;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.35);
  }
}

/* ---------- Lapisan main interaktif (V3) ---------- */

#pentas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(72px + env(safe-area-inset-top)) 14px calc(160px + env(safe-area-inset-bottom));
  pointer-events: none;
}

#pentas[hidden] { display: none; }
#pentas.beku { pointer-events: none !important; }

.pentas-beg, .pentas-uniform, .pentas-syiling, .pentas-gosok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 100%;
  max-width: 520px;
}

/* Kad dialog menjadi bar arahan nipis semasa main */
.kad-dialog.kad-main { padding: 12px 16px 14px; }
.kad-main .teks-dialog { font-size: 1.14rem; margin-top: 7px; }
.kad-main .avatar-penutur { width: 44px; height: 44px; font-size: 1.2rem; }

.pil-kiraan, .pil-petunjuk {
  margin: 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 249, 239, 0.95);
  border: 2px solid var(--garis);
  color: var(--teal-gelap);
  font-size: 1.08rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 6px 14px rgba(9, 38, 33, 0.18);
}

.pil-petunjuk[hidden] { display: none; }

/* Ubin boleh seret (beg dan uniform) */
.ubin-main, .ubin-pakaian {
  position: relative;
  border: 2.5px solid var(--garis);
  border-radius: 18px;
  background: #fff;
  color: var(--dakwat);
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 5px 12px rgba(9, 38, 33, 0.16);
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.ubin-main svg, .ubin-pakaian svg { pointer-events: none; }

.ubin-main.menyeret, .ubin-pakaian.menyeret, .syiling.menyeret {
  z-index: 9;
  box-shadow: 0 16px 30px rgba(9, 38, 33, 0.35);
}

.ubin-main.goncang-main, .ubin-pakaian.goncang-main, .syiling.goncang-main {
  animation: goncang 0.42s ease;
}

.tanda-siap {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--betul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 9px rgba(9, 60, 40, 0.35);
}

.tanda-siap svg { width: 17px; height: 17px; }

/* Main beg */
.grid-barang-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 440px;
}

.ubin-main { min-height: 92px; padding: 10px 6px; font-size: 0.98rem; }
.ubin-main svg { width: 40px; height: 40px; }

.beg-besar { width: 172px; margin-top: 2px; }
.beg-besar svg { width: 100%; height: auto; display: block; }

.beg-besar.pop { animation: pop-beg 0.45s ease; }

@keyframes pop-beg {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* Main uniform */
.hero-pentas { width: 138px; }
.hero-pentas svg { width: 100%; height: auto; display: block; }

.hero-pentas.melompat { animation: lompat 0.62s ease; }

.baris-pakaian {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.ubin-pakaian { width: 100px; min-height: 94px; padding: 10px 6px; font-size: 1rem; }
.ubin-pakaian > svg { width: 42px; height: 42px; }
.ubin-pakaian.siap { opacity: 0.72; border-color: var(--betul); background: #eefaf2; }

/* Main syiling */
.baris-bayar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 440px;
}

.tag-harga {
  padding: 10px 16px 12px;
  border-radius: 16px;
  background: rgba(255, 249, 239, 0.96);
  border: 2px solid var(--garis);
  box-shadow: 0 6px 14px rgba(9, 38, 33, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.tag-harga span { font-size: 0.98rem; font-weight: 700; color: var(--dakwat-lembut); }
.tag-harga strong { font-size: 1.75rem; line-height: 1.1; color: var(--teal-gelap); }

.zon-bayar { position: relative; width: 126px; flex: none; }
.zon-bayar > svg { width: 100%; height: auto; display: block; }

.longgok-bayar { position: absolute; inset: 0; }

.syiling-bayar {
  position: absolute;
  width: 47px;
  height: 47px;
  padding: 0;
  border: none;
  background: transparent;
}

.syiling-bayar svg { width: 100%; height: 100%; display: block; }

.syiling-bayar.gembira { animation: jiggle-syiling 0.5s ease-in-out 2; }

@keyframes jiggle-syiling {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-6deg) translateY(-4px); }
  65% { transform: rotate(6deg) translateY(-2px); }
}

.jumlah-besar {
  margin: 0;
  min-height: 58px;
  padding: 10px 22px;
  border-radius: 18px;
  background: rgba(255, 249, 239, 0.96);
  border: 2px solid var(--garis);
  color: var(--teal-gelap);
  font-size: 1.45rem;
  font-weight: 800;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(9, 38, 33, 0.18);
}

.dulang-syiling {
  display: grid;
  grid-template-columns: repeat(3, 84px);
  gap: 10px;
  justify-content: center;
}

.syiling {
  width: 84px;
  height: 84px;
  padding: 7px;
  border: 2.5px solid var(--garis);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 12px rgba(9, 38, 33, 0.16);
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.syiling svg { width: 100%; height: 100%; display: block; pointer-events: none; }

/* Main gosok tangan */
.pentas-gosok { gap: 10px; }

.zon-gosok {
  position: relative;
  width: min(92vw, 400px);
  border-radius: 22px;
  background: rgba(255, 249, 239, 0.88);
  border: 2px solid var(--garis);
  box-shadow: 0 10px 22px rgba(9, 38, 33, 0.2);
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.zon-gosok > svg { width: 100%; height: auto; display: block; }

.lapisan-buih { position: absolute; inset: 0; pointer-events: none; }

.buih {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff, rgba(205, 232, 248, 0.55));
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.buih-tangan { fill: #ffffff; opacity: 0; transition: opacity 0.6s ease; }

.aliran-air { opacity: 0; transition: opacity 0.3s ease; }

.zon-gosok.membilas .aliran-air {
  opacity: 0.9;
  animation: aliran-air 0.45s linear infinite;
}

@keyframes aliran-air {
  to { stroke-dashoffset: -34; }
}

.tangan-gosok { transform-box: fill-box; transform-origin: center; }

.zon-gosok.goyang .tangan-gosok { animation: goyang-tangan 0.8s ease; }

@keyframes goyang-tangan {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2.6deg) translateY(-2px); }
  60% { transform: rotate(2.6deg) translateY(1px); }
}

.bekas-bar-buih {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(92vw, 400px);
}

.bekas-bar-buih > span {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(9, 38, 33, 0.55);
  flex: none;
}

.bar-buih {
  flex: 1;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid var(--garis);
  overflow: hidden;
}

.isi-buih {
  height: 100%;
  width: 0%;
  background: linear-gradient(to bottom, #cdeffb, #7ec8e3);
  transition: width 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .ubin-main.goncang-main, .ubin-pakaian.goncang-main, .syiling.goncang-main { animation: none; }
  .beg-besar.pop, .hero-pentas.melompat, .syiling-bayar.gembira { animation: none; }
  .zon-gosok.goyang .tangan-gosok, .zon-gosok.membilas .aliran-air { animation: none; }
  .isi-buih { transition: none; }
}

/* ---------- Lapisan main tambahan (V4) ---------- */

.pentas-jalan, .pentas-ketikh, .pentas-susun, .pentas-rentak, .pentas-baling {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 100%;
  max-width: 560px;
}

.pentas-jalan, .pentas-ketikh {
  position: relative;
  flex: 1;
  width: 100%;
}

/* Main jalan: zon ketik penuh, penanda berdenyut dan hero berjalan */
.zon-jalan {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.penanda-jalan {
  position: absolute;
  bottom: 12%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 5px 8px rgba(9, 38, 33, 0.4));
}

.penanda-jalan svg { width: 100%; height: 100%; display: block; position: relative; }

.gelang-penanda {
  position: absolute;
  inset: -13px;
  border: 3.5px solid rgba(245, 158, 11, 0.85);
  border-radius: 50%;
  animation: denyut-penanda 1.4s ease-out infinite;
  pointer-events: none;
}

.gelang-penanda.lewat { animation-delay: 0.7s; }

.penanda-jalan.senyap .gelang-penanda { display: none; }

@keyframes denyut-penanda {
  0% { transform: scale(0.55); opacity: 0.95; }
  100% { transform: scale(1.3); opacity: 0; }
}

.hero-jalan {
  position: absolute;
  bottom: 9%;
  width: 104px;
  margin-left: -52px;
  pointer-events: none;
}

.hero-jalan svg { width: 100%; height: auto; display: block; position: relative; }

.hero-jalan::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -7px;
  height: 13px;
  border-radius: 50%;
  background: rgba(15, 40, 34, 0.28);
}

/* Main ketik huruf: buih terapung berisi huruf */
.zon-buih-huruf {
  position: absolute;
  inset: 52px 0 0 0;
}

.buih-huruf {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98), rgba(174, 222, 246, 0.75) 55%, rgba(126, 200, 227, 0.65));
  color: var(--teal-gelap);
  font-size: 2.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(9, 38, 33, 0.22), inset 0 0 0 3px rgba(255, 255, 255, 0.35);
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  animation: apung-buih 3.2s ease-in-out infinite alternate;
}

.buih-huruf span { pointer-events: none; }

@keyframes apung-buih {
  from { margin-top: -6px; }
  to { margin-top: 9px; }
}

.buih-huruf.pecah { animation: letup-buih 0.45s ease-out forwards; }

@keyframes letup-buih {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(1.3); opacity: 0.75; }
  100% { transform: scale(1.55); opacity: 0; }
}

.buih-huruf.goncang-main, .medalion-rentak.goncang-main { animation: goncang 0.42s ease; }
.buih-huruf.goncang-main { animation-name: goncang; }

/* Main susun dulang */
.dulang-besar { position: relative; width: min(76vw, 330px); }
.dulang-besar > svg { width: 100%; height: auto; display: block; }

.dulang-besar.pop { animation: pop-beg 0.45s ease; }

.isi-dulang {
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 9px;
  pointer-events: none;
}

.barang-dulang {
  width: 54px;
  height: 54px;
  padding: 6px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 9px rgba(9, 38, 33, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.barang-dulang svg { width: 100%; height: 100%; }

/* Main rentak: medalion dan bulatan cahaya */
.baris-bintang-rentak {
  display: flex;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 51, 45, 0.45);
}

.slot-bintang svg {
  width: 32px;
  height: 32px;
  display: block;
  fill: rgba(255, 255, 255, 0.4);
}

.slot-bintang.penuh svg {
  fill: #ffd76a;
  filter: drop-shadow(0 3px 6px rgba(146, 96, 10, 0.5));
}

.zon-medalion {
  position: relative;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cincin-rentak {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128px;
  height: 128px;
  border: 4.5px solid rgba(245, 158, 11, 0.85);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.medalion-rentak {
  width: 128px;
  height: 128px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
  filter: drop-shadow(0 10px 18px rgba(9, 38, 33, 0.3));
}

.medalion-rentak svg { width: 100%; height: 100%; display: block; pointer-events: none; }

/* Main baling bola */
.pil-baling { min-width: 130px; font-size: 1.3rem; }

.pentas-bola {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 252px;
}

.watak-baling {
  position: absolute;
  bottom: 0;
  width: 92px;
  pointer-events: none;
}

.watak-baling svg { width: 100%; height: auto; display: block; }
.watak-baling.kiri { left: 2%; }
.watak-baling.kanan { right: 2%; }

.watak-baling.melompat { animation: lompat 0.62s ease; }

.bola-main {
  position: absolute;
  left: calc(2% + 82px);
  bottom: 104px;
  width: 76px;
  height: 76px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 7px 10px rgba(9, 38, 33, 0.3));
}

.bola-main svg { width: 100%; height: 100%; display: block; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .buih-huruf { animation: none; }
  .buih-huruf.pecah { animation: none; opacity: 0; }
  .gelang-penanda { animation: none; opacity: 0.55; }
  .buih-huruf.goncang-main, .medalion-rentak.goncang-main { animation: none; }
  .dulang-besar.pop, .watak-baling.melompat { animation: none; }
}

/* ---------- Maklum balas ibu bapa ---------- */

/* Butang senyap pada bahagian bawah skrin tajuk */
.butang-maklumbalas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 11px 22px;
  min-height: 52px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(10, 43, 38, 0.38);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(9, 38, 33, 0.25);
}

.butang-maklumbalas svg { width: 22px; height: 22px; flex: none; }
.butang-maklumbalas:active { transform: scale(0.97); }

/* Lapisan popup di atas semua skrin */
.lapisan-maklumbalas {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 32, 28, 0.62);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.lapisan-maklumbalas[hidden] { display: none; }

@media (min-width: 700px) {
  .lapisan-maklumbalas { align-items: center; }
}

.kad-maklumbalas {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  overflow-y: auto;
  background: linear-gradient(to bottom, #fffdf7, var(--krim));
  border: 2px solid var(--garis);
  border-radius: var(--jari);
  box-shadow: 0 18px 40px rgba(9, 38, 33, 0.4);
  padding: 20px 20px 22px;
}

.kad-maklumbalas h2 {
  margin: 0 0 8px;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--teal-gelap);
}

.kad-maklumbalas.goncang { animation: goncang 0.42s ease; }

.kad-maklumbalas .input-nama {
  min-height: 52px;
  font-size: 1.05rem;
  text-align: left;
}

.kad-maklumbalas .butang-hantu { display: block; margin: 10px auto 0; }

#lapisan-letup-mb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
  border-radius: var(--jari);
}

.mb-intro {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--dakwat);
}

.mb-nota-ulang {
  margin: 12px 0 0;
  padding: 9px 13px;
  border-radius: 12px;
  background: #e7f7ee;
  border: 2px solid #bfe6cf;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-gelap);
}

.mb-nota-ulang[hidden] { display: none; }

.baris-bintang { display: flex; gap: 6px; }

.bintang-nilai {
  width: 56px;
  height: 56px;
  padding: 9px;
  border: none;
  border-radius: 16px;
  background: transparent;
}

.bintang-nilai svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: #e9dfc6;
  stroke: #bfae8b;
  stroke-width: 1.1;
}

.bintang-nilai.penuh svg {
  fill: #ffb703;
  stroke: #d9930d;
  filter: drop-shadow(0 3px 5px rgba(146, 96, 10, 0.35));
}

.bintang-nilai:active { transform: scale(0.92); }

.input-mesej {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  border: 2.5px solid var(--garis);
  border-radius: 16px;
  background: #fff;
  color: var(--dakwat);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  resize: vertical;
}

.input-mesej:focus-visible, .input-mesej:focus {
  outline: 3px solid var(--oren);
  outline-offset: 2px;
}

.mb-petunjuk {
  margin: 12px 0 0;
  padding: 9px 13px;
  border-radius: 12px;
  background: #fdeeda;
  border: 2px solid var(--oren);
  font-size: 0.97rem;
  font-weight: 700;
  color: #8a5a00;
}

.mb-petunjuk[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kad-maklumbalas.goncang { animation: none; }
  .butang-maklumbalas:active, .bintang-nilai:active { transform: none; }
}