/* =====================================================================
   STYLE.CSS — Template "Pohon Kita" 🌳 (PRD Addendum v1.3 — revisi total
   Template 7, menggantikan Taman Kita)
   =====================================================================
   Mode GELAP (default shared/core.css) — sama seperti slot Taman Kita
   yang digantikan (design.md § Genre, mode-assignment table). Chrome UI
   (kartu, teks, footer) ikut token dark default core.css tanpa override.

   Scene langit/bukit/tanah di Babak 5 punya palet warnanya SENDIRI,
   hardcode di :root bawah (Bagian 6.1 PRD — "scene fisik, jangan ikut
   dark mode OS") dan CROSSFADE antar 3 mode (pagi/siang/malam) mengikuti
   jam lokal penerima, TERPISAH dari token brand gelap/terang di atas.
   --color-accent (koral) tetap satu-satunya warna aksi di seluruh babak.
   ===================================================================== */

:root {
  /* === TEMA FULLY PINK — ochaa24thn === */

  /* Langit: pink di pagi & siang, plum gelap di malam */
  --pohon-langit-pagi-1: #ffd6eb;
  --pohon-langit-pagi-2: #f2c0e0;
  --pohon-langit-siang-1: #f8d0e8;
  --pohon-langit-siang-2: #fce4f0;
  --pohon-langit-malam-1: #0d0710;
  --pohon-langit-malam-2: #150b12;

  /* Bukit: rose & mauve */
  --pohon-bukit-jauh: #d4a8c0;
  --pohon-bukit-jauh-malam: #1e0c18;
  --pohon-bukit-dekat: #c490b0;
  --pohon-bukit-dekat-malam: #160a14;

  /* Tanah: tetap earthy tapi sedikit warm rose */
  --pohon-tanah: #8b6068;
  --pohon-tanah-permukaan: #6b4550;
  --pohon-tanah-malam: #240f16;
  --pohon-tanah-permukaan-malam: #170a10;

  /* Rumput: sakura pink */
  --pohon-rumput: #c87aaa;
  --pohon-rumput-malam: #3d1a30;

  --pohon-kupu-warna: #f9a8d4;
  --pohon-kunang: #ffb6d9;

  --pohon-surat-krem: #fff0f7;
  --pohon-surat-tepi: #f0c8dc;
  --pohon-surat-pita: var(--color-accent);

  /* Bayangan & siluet: rose tone */
  --pohon-bayangan: #5a2a3a;
  --pohon-batu: #7a5060;
  --pohon-burung-warna: #4a2035;
  --pohon-siluet-jauh: #8a5070;

  /* Brand colors: deep plum background, bukan navy */
  --color-bg: #150b12;
  --color-bg-elevated: #1f1020;
  --color-accent: #f472b6;
  --color-accent-contrast: #3d0f25;
  --color-danger: #be185d;
}

/* Hallmark · component-voice pass · design-system: design.md · template: pohon-kita
   Footer & tombol utama tetap sama fungsinya, cuma chrome visualnya digeser
   biar nggak identik 1:1 sama 7 template lain — footer dapat tekstur garis
   akar tipis, tombol dapat radius asimetris (organik, bukan pill sempurna). */
.footer-referral {
  position: relative;
}
.footer-referral::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    var(--pohon-bukit-dekat) 15%,
    transparent 30%,
    var(--pohon-bukit-dekat) 55%,
    transparent 70%,
    var(--pohon-bukit-dekat) 85%,
    transparent 100%
  );
  opacity: 0.5;
}

.btn--primary {
  border-radius: 999px 12px 999px 12px;
}

/* Bloom atmosferik (pola sama dengan landing.css) — cuma Babak 3 & 4 yang
   masih polos dari core.css. Babak 1/2 udah punya gradasi tanah sendiri,
   Babak 5 udah scene lengkap (langit/bukit/tanah) — jangan dobel-tambah
   di situ. Koral + Teal (dekat hijau), selaras tema tumbuh/alam. */
.babak-klimaks,
.babak-balasan {
  background-image:
    radial-gradient(ellipse 65% 45% at 85% 10%, rgba(244, 114, 182, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 55% at 15% 90%, rgba(244, 114, 182, 0.08), transparent 60%);
}

/* ---------------------------------------------------------------------
   BABAK 1 — GERBANG: tahan jari di tanah (benih -> tunas)
   --------------------------------------------------------------------- */
.babak-gerbang {
  padding: 0;
  min-height: 100dvh;
  display: flex;
}

.pohon-gerbang-stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10dvh;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 60% at 50% 100%, var(--pohon-tanah-malam), var(--color-bg) 70%);
}

.pohon-tanah-tap {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 42dvh;
  min-height: 220px;
  touch-action: none;
  cursor: pointer;
  /* touch-action:none doang cegah SCROLL, bukan long-press callout/context
     menu HP — nahan jari diam 3 detik itu persis pemicu long-press native,
     dan begitu itu muncul browser ngirim pointercancel walau jari belum
     diangkat (bug nyata: hold-nya berhenti sendiri). Baris di bawah
     matiin callout/seleksi teks itu supaya pointerdown yang jalan sampai
     3 detik penuh. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pohon-retak-svg {
  position: absolute;
  bottom: 8dvh;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: auto;
  overflow: visible;
}

.retak-path {
  fill: none;
  stroke: var(--color-bg-elevated);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.retak-path.is-retak {
  stroke: var(--pohon-tanah-permukaan-malam);
}

.pohon-progress-ring {
  position: absolute;
  bottom: 8dvh;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  pointer-events: none;
}

.progress-ring__bg,
.progress-ring__bar {
  fill: none;
  stroke-width: 4;
}

.progress-ring__bg {
  stroke: rgba(251, 238, 224, 0.14);
}

.progress-ring__bar {
  stroke: var(--color-accent);
  stroke-linecap: round;
  transform-origin: 42px 42px;
  transform: rotate(-90deg);
  stroke-dasharray: 226.19; /* 2 * PI * 36 */
  stroke-dashoffset: 226.19;
}

.progress-ring__bar.is-mengisi {
  transition: stroke-dashoffset 3s linear;
  stroke-dashoffset: 0;
}

.pohon-tunas {
  position: absolute;
  bottom: 8dvh;
  left: 50%;
  transform: translateX(-50%) scale(0.3);
  transform-origin: bottom center;
  width: 64px;
  height: 64px;
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
}

.pohon-tunas.is-mekar {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.pohon-tunas__svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.40));
}

@media (prefers-reduced-motion: reduce) {
  .pohon-tunas,
  .progress-ring__bar {
    transition-duration: 0.01ms !important;
  }
}

.pohon-gerbang-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.pohon-pembuka {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin: 0;
}

.pohon-pembuka-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------
   BABAK 2 — PERJALANAN
   --------------------------------------------------------------------- */
.babak-perjalanan {
  position: relative;
  padding-bottom: calc(var(--space-8) + var(--footer-h));
}

.pohon-perjalanan-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.1;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, var(--pohon-tanah-malam), transparent 70%);
}

.pohon-perjalanan-teks {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-6) 0;
}

/* ---------------------------------------------------------------------
   BABAK 3 — KLIMAKS: surat pertama jatuh
   --------------------------------------------------------------------- */
.pohon-klimaks-hint {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.pohon-surat-klimaks-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-6) auto;
  min-height: 100px;
}

.pohon-surat-klimaks {
  width: 90px;
  height: 90px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transform: translateY(-140px) rotate(-8deg);
}

.pohon-surat-klimaks.is-jatuh {
  animation: pohon-surat-jatuh 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pohon-surat-jatuh {
  0% {
    opacity: 0;
    transform: translateY(-140px) rotate(-8deg);
  }
  70% {
    opacity: 1;
    transform: translateY(6px) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

.pohon-surat-klimaks.is-siap {
  /* Wajib diulang di sini (bukan cuma andalkan hasil animasi is-jatuh) —
     begitu is-siap nyala, `animation` di sini MENGGANTIKAN animation dari
     .is-jatuh sepenuhnya (satu-satunya yang menang, bukan digabung), dan
     keyframe pulsasi cuma nyentuh `filter`. Tanpa opacity/transform statis
     di sini, elemen balik ke state awal .pohon-surat-klimaks (opacity:0,
     translateY(-140px)) begitu is-jatuh berhenti mengontrol — itu bug
     nyata: surat "hilang" tepat pas siap ditap. */
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  animation: pohon-surat-klimaks-pulsasi 2.2s ease-in-out infinite;
}

.pohon-surat-klimaks.is-dibuka {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
  animation: none;
  filter: none;
}

.pohon-surat-klimaks__svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

@keyframes pohon-surat-klimaks-pulsasi {
  0%,
  100% {
    filter: drop-shadow(0 0 4px var(--color-accent));
  }
  50% {
    filter: drop-shadow(0 0 14px var(--color-accent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pohon-surat-klimaks {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   BABAK 5 — KEHIDUPAN KEDUA: pohon yang tumbuh
   --------------------------------------------------------------------- */
.babak-pohon {
  padding: 0 0 var(--space-6) 0;
}

.pohon-header {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin: var(--space-4) var(--space-5) 0;
}

.pohon-header-sub {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 var(--space-3);
}

.pohon-scene {
  position: relative;
  width: 100%;
  height: 62dvh;
  min-height: 380px;
  overflow: hidden;
}

.pohon-langit {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--pohon-langit-siang-1), var(--pohon-langit-siang-2));
  transition: background 2s ease;
}

.pohon-scene.is-pagi .pohon-langit {
  background: linear-gradient(to bottom, var(--pohon-langit-pagi-1), var(--pohon-langit-pagi-2));
}

.pohon-scene.is-siang .pohon-langit {
  background: linear-gradient(to bottom, var(--pohon-langit-siang-1), var(--pohon-langit-siang-2));
}

.pohon-scene.is-malam .pohon-langit {
  background: linear-gradient(to bottom, var(--pohon-langit-malam-1), var(--pohon-langit-malam-2));
}

.pohon-bintang-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
}

.pohon-scene.is-malam .pohon-bintang-layer {
  opacity: 1;
}

.pohon-bintang {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--pohon-surat-krem);
  animation: pohon-bintang-kelip 3s ease-in-out infinite;
}

@keyframes pohon-bintang-kelip {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}

.pohon-awan-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.pohon-scene.is-siang .pohon-awan-layer {
  opacity: 1;
}

.pohon-awan {
  position: absolute;
  animation: pohon-awan-gerak linear infinite;
}

.pohon-awan svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

@keyframes pohon-awan-gerak {
  from {
    transform: translateX(-20vw);
  }
  to {
    transform: translateX(120vw);
  }
}

.pohon-kunang-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.pohon-scene.is-malam .pohon-kunang-layer {
  opacity: 1;
}

.pohon-kunang {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pohon-kunang);
  box-shadow: 0 0 6px 2px var(--pohon-kunang);
  animation: pohon-kunang-kedip ease-in-out infinite;
}

@keyframes pohon-kunang-kedip {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.85;
  }
}

.pohon-kupu-kupu {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.pohon-scene.is-siang .pohon-kupu-kupu.is-aktif {
  opacity: 0.9;
}

.pohon-bukit {
  position: absolute;
  left: 0;
  width: 100%;
  height: 46%;
  fill: var(--pohon-bukit-jauh);
  transition: fill 2s ease;
}

.pohon-scene.is-malam .pohon-bukit--jauh {
  fill: var(--pohon-bukit-jauh-malam);
}

.pohon-bukit--jauh {
  bottom: 22%;
  z-index: 1;
}

.pohon-siluet-jauh {
  /* .pohon-bukit set fill di elemen <svg>-nya sendiri — tanpa override di
     sini, siluet pohon jauh ini bakal ke-inherit warna bukit dan jadi
     nggak kelihatan sama sekali (nyatu sama warna belakangnya). */
  fill: var(--pohon-siluet-jauh);
  opacity: 0.52;
}

.pohon-bukit--dekat {
  bottom: 16%;
  fill: var(--pohon-bukit-dekat);
  z-index: 2;
}

.pohon-scene.is-malam .pohon-bukit--dekat {
  fill: var(--pohon-bukit-dekat-malam);
}

.pohon-tanah {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  z-index: 3;
  background: linear-gradient(to bottom, var(--pohon-tanah), var(--pohon-tanah-permukaan));
  transition: background 2s ease;
}

.pohon-scene.is-malam .pohon-tanah {
  background: linear-gradient(to bottom, var(--pohon-tanah-malam), var(--pohon-tanah-permukaan-malam));
}

.pohon-rumput-layer {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 16px;
  color: var(--pohon-rumput);
  transition: color 2s ease;
}

.pohon-scene.is-malam .pohon-rumput-layer {
  color: var(--pohon-rumput-malam);
}

.pohon-batang-wrap {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: 60%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.pohon-bibit-svg {
  width: 34px;
  height: 34px;
  display: none;
}

.pohon-bibit-svg.is-tampil {
  display: block;
}

.pohon-tree-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  /* Titik tumpu tanah pohon.svg ada di (512, 839) dari viewBox ASLI
     1024x1024, tapi viewBox root svg ini sekarang DIPOTONG jadi
     "0 0 1024 839" (bukan 1024x1024 lagi) — supaya tepi bawah KOTAK
     RENDER svg ini persis di titik tumpu tanahnya, bukan 18% di
     bawahnya (margin kosong bawaan pohon.svg yang bikin pohon KELIHATAN
     MELAYANG di atas tanah — .pohon-batang-wrap pakai align-items:
     flex-end, jadi yang nempel ke tanah itu TEPI BAWAH svg, bukan titik
     tumpu batangnya, kalau viewBox masih penuh 1024 tinggi). Dengan
     viewBox dipotong pas di 839, transform-origin cukup 50% 100%
     (bawah-tengah) — nggak perlu angka ajaib 81.93% lagi. Skala x:y
     tetap sama (nggak distorsi) karena rasio unit/px x & y nggak
     berubah, cuma area yang dipetakan yang dipotong. */
  transform-origin: 50% 100%;
  transform: scale(0);
  display: none;
}

.pohon-tree-svg.is-tampil {
  display: block;
}

.pohon-bayangan-pohon {
  fill: var(--pohon-bayangan);
  opacity: 0.28;
}

.pohon-buah-item {
  transform-origin: center;
}

.pohon-buah-item.is-pesan {
  filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.8));
  cursor: pointer;
  pointer-events: auto;
}

@keyframes pohon-buah-goyang {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

.pohon-burung-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.pohon-burung {
  position: absolute;
  top: 12%;
  width: 20px;
  height: 12px;
  opacity: 0.5;
  animation: pohon-burung-terbang linear forwards;
}

.pohon-burung svg {
  width: 100%;
  height: 100%;
}

@keyframes pohon-burung-terbang {
  from {
    transform: translateX(-10vw);
  }
  to {
    transform: translateX(110vw);
  }
}

.pohon-surat-layer {
  position: absolute;
  bottom: 6%;
  left: 0;
  width: 100%;
  height: 46px;
  z-index: 5;
}

.pohon-surat-item {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transform: translateX(-50%);
}

.pohon-surat-item::after {
  /* Bayangan tiap gulungan (PRD v1.4 Bagian 7.5) — pseudo-element, jadi
     otomatis ikut kehapus barengan tombolnya begitu suratnya dibaca,
     tanpa perlu elemen/JS terpisah. */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 70%;
  height: 5px;
  background: var(--pohon-bayangan);
  opacity: 0.22;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.pohon-surat-item__svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}

.pohon-surat-item.is-baru {
  animation: pohon-surat-item-jatuh 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pohon-surat-item-jatuh {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-160px);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.pohon-surat-item.is-glow .pohon-surat-item__svg {
  animation: pohon-surat-glow 2.4s ease-in-out infinite;
}

@keyframes pohon-surat-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px var(--color-accent));
  }
  50% {
    filter: drop-shadow(0 0 8px var(--color-accent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pohon-awan,
  .pohon-kunang,
  .pohon-kupu-kupu,
  .pohon-burung,
  .pohon-bintang,
  .pohon-surat-item.is-baru,
  .pohon-surat-item.is-glow .pohon-surat-item__svg,
  .pohon-buah-item {
    animation: none !important;
  }
  .pohon-surat-item.is-baru {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.pohon-fase-label {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: rgba(16, 22, 32, 0.55);
  color: var(--pohon-surat-krem);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 10;
  backdrop-filter: blur(2px);
}

.pohon-papan-habis {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-elevated);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  z-index: 5;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   IKON RIWAYAT (matahari/bulan/awan-matahari) + hint
   --------------------------------------------------------------------- */
.pohon-btn-riwayat {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(16, 22, 32, 0.25);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pohon-surat-krem);
}

.pohon-scene.is-pagi .pohon-btn-riwayat,
.pohon-scene.is-siang .pohon-btn-riwayat {
  color: #3d2e28;
  background: rgba(255, 255, 255, 0.35);
}

.pohon-btn-riwayat svg {
  width: 26px;
  height: 26px;
}

.pohon-btn-riwayat__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
}

.pohon-btn-riwayat__ring.is-hint {
  opacity: 1;
  animation: pohon-hint-pulse 1.6s ease-out infinite;
}

@keyframes pohon-hint-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.pohon-riwayat-tooltip {
  position: absolute;
  top: calc(var(--space-4) + 54px);
  right: var(--space-4);
  z-index: 20;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-soft);
  animation: pohon-tooltip-fade 400ms var(--ease-out);
}

@keyframes pohon-tooltip-fade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pohon-btn-riwayat__ring.is-hint {
    animation: none;
    opacity: 0.6;
  }
}

/* ---------------------------------------------------------------------
   SAMBUTAN / BANNER ISI ULANG
   --------------------------------------------------------------------- */
.pohon-sambutan,
.pohon-banner-isiulang {
  margin: var(--space-4) var(--space-5) 0;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--fs-sm);
  text-align: center;
}

.pohon-banner-isiulang {
  border: 1px solid rgba(255, 182, 166, 0.25);
}

.pohon-banner-isiulang a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   KARTU SURAT
   --------------------------------------------------------------------- */
.pohon-kartu {
  position: relative;
  margin: var(--space-4) var(--space-5) 0;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.pohon-kartu__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.pohon-kartu__teks {
  margin: 0;
  font-family: var(--font-letter);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.pohon-kartu__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   PANEL RIWAYAT (bottom sheet)
   --------------------------------------------------------------------- */
.pohon-riwayat-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 14, 22, 0.55);
  display: flex;
  align-items: flex-end;
}

.pohon-riwayat-panel {
  width: 100%;
  max-height: 78dvh;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--space-3) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transform: translateY(0);
  animation: pohon-panel-naik 320ms var(--ease-out);
}

@keyframes pohon-panel-naik {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.pohon-riwayat-panel__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft, rgba(251, 238, 224, 0.2));
  margin: 0 auto;
}

.pohon-riwayat-panel__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: center;
}

.pohon-riwayat-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pohon-riwayat-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  background: none;
  border: none;
  color: var(--color-text);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(251, 238, 224, 0.08);
  cursor: pointer;
}

.pohon-riwayat-item__badge {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 6px;
  opacity: 0;
}

.pohon-riwayat-item.is-belum-dibaca .pohon-riwayat-item__badge {
  opacity: 1;
}

.pohon-riwayat-item__body {
  flex: 1;
  min-width: 0;
}

.pohon-riwayat-item__hari {
  margin: 0 0 2px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pohon-riwayat-item__cuplikan {
  margin: 0;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pohon-riwayat-panel__close {
  align-self: center;
  background: none;
  border: 1px solid rgba(251, 238, 224, 0.2);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
}

/* =====================================================================
   BABAK 25 — MINI GAME: Benang Kita (maze)
   ===================================================================== */
.babak-game {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.babak-game .container {
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.game-level-label {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.game-arena {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
}

#game-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  cursor: crosshair;
}

.game-hint-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  min-height: 1.4em;
  transition: opacity 0.3s;
}

.game-btns {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  min-height: 2.5rem;
}

.game-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 340px;
  margin: 0 auto;
  animation: fadeSlideUp 0.6s ease both;
}

.game-reward-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  font-style: italic;
}

/* =====================================================================
   MOMEN KILAU (PRD Addendum v1.3 Bagian 7a + Dekorasi-Momen-Kilau-100-
   Hari.md) — dekorasi ambient tiap hari genap, murni visual delight.
   Layer tunggal, pointer-events:none seluruhnya (satu-satunya interaksi,
   "tap kanopi", nempel ke elemen pohon yang sudah ada, bukan ke layer
   ini) supaya tidak pernah menghalangi tap ke gulungan surat/ikon
   riwayat. Objek (burung/kupu-kupu/dst) di-load dari shared/assets/
   dekorasi/*.svg lewat <img>, efek non-objek (shimmer/pelangi/rays/dst)
   murni CSS di bawah.
   ===================================================================== */
.pohon-kilau-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.kilau-obj {
  position: absolute;
  will-change: transform, opacity;
}

.kilau-obj img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Caption milestone/Finale — kartu kecil melayang di atas scene, senada
   .pohon-fase-label tapi dibedain dikit (border koral) biar berasa
   momen spesial, bukan label ganti-fase biasa. */
.kilau-caption {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 78%;
  text-align: center;
  padding: var(--space-2) var(--space-5);
  background: rgba(16, 22, 32, 0.6);
  border: 1px solid rgba(255, 182, 166, 0.5);
  color: var(--pohon-surat-krem);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 11;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}
.kilau-caption.is-tampil {
  animation: kilau-caption-in 0.5s ease-out forwards;
}

/* Kartu "kilas balik" (tap kanopi saat Momen Kilau aktif) — reuse struktur
   visual .pohon-kartu tapi elemen sendiri supaya tidak tabrakan state
   dengan kartu surat/buah yang sudah ada. */
.pohon-kilau-flashback {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(3px);
}
.pohon-kilau-flashback[hidden] {
  display: none;
}
.pohon-kilau-flashback__card {
  position: relative;
  max-width: 340px;
  width: 100%;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.pohon-kilau-flashback__label {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pohon-kilau-flashback__teks {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed, 1.6);
}
.pohon-kilau-flashback__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  font-size: var(--fs-md);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Primitif animasi objek
   --------------------------------------------------------------------- */
@keyframes kilau-caption-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes kilau-jatuh {
  /* PENTING: animasikan `top` (persen dari KONTAINER), bukan
     `transform: translateY(persen)` — persen di translate itu dihitung
     dari ukuran ELEMEN itu sendiri (spek CSS), jadi elemen kecil (±12px)
     cuma bergeser beberapa piksel dan nggak pernah kelihatan jatuh
     melintasi scene. `top` di sini aman dianimasikan karena elemen
     position:absolute di dalam kontainer yang punya tinggi jelas. */
  0% { top: -8%; transform: translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 112%; transform: translateX(var(--kilau-drift, 20px)) rotate(var(--kilau-rotasi, 200deg)); opacity: 0; }
}

@keyframes kilau-melayang {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(var(--kilau-dx, 10px), calc(var(--kilau-dy, -14px) * -1)); }
  50% { transform: translate(calc(var(--kilau-dx, 10px) * 1.6), 0); }
  75% { transform: translate(var(--kilau-dx, 10px), var(--kilau-dy, -14px)); }
}

@keyframes kilau-melintas {
  from { transform: translateX(-15vw); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  to { transform: translateX(115vw); opacity: 0; }
}

@keyframes kilau-naik {
  /* Sama seperti kilau-jatuh: animasikan `bottom` (persen kontainer),
     bukan transform translateY(persen) yang cuma relatif ke ukuran
     elemen sendiri. */
  0% { bottom: 4%; transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { bottom: 130%; transform: translateX(var(--kilau-drift, 12px)); opacity: 0; }
}

@keyframes kilau-jalan {
  0%, 100% { transform: translateX(0) scaleX(1); }
  49% { transform: translateX(var(--kilau-jalan-jarak, 60%)) scaleX(1); }
  50% { transform: translateX(var(--kilau-jalan-jarak, 60%)) scaleX(-1); }
  99% { transform: translateX(0) scaleX(-1); }
}

@keyframes kilau-zigzag {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(14px, -10px); }
  40% { transform: translate(-10px, -18px); }
  60% { transform: translate(12px, -6px); }
  80% { transform: translate(-14px, -16px); }
}

@keyframes kilau-kedip {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

@keyframes kilau-fade-inout {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.95; }
}

@keyframes kilau-goyang-ringan {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(var(--kilau-rotasi, 3deg)); }
}

@keyframes kilau-gelembung-naik {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateY(-90vh) translateX(var(--kilau-drift, 16px)); opacity: 0; }
}

@keyframes kilau-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes kilau-fade-simple {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kilau-anim-jatuh { animation-name: kilau-jatuh; animation-timing-function: linear; animation-fill-mode: forwards; }
.kilau-anim-melayang { animation-name: kilau-melayang; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.kilau-anim-melintas { animation-name: kilau-melintas; animation-timing-function: linear; animation-fill-mode: forwards; }
.kilau-anim-naik { animation-name: kilau-naik; animation-timing-function: ease-in; animation-fill-mode: forwards; }
.kilau-anim-jalan { animation-name: kilau-jalan; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.kilau-anim-zigzag { animation-name: kilau-zigzag; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.kilau-anim-kedip { animation-name: kilau-kedip; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.kilau-anim-fade-inout { animation-name: kilau-fade-inout; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.kilau-anim-goyang { animation-name: kilau-goyang-ringan; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.kilau-anim-gelembung { animation-name: kilau-gelembung-naik; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.kilau-anim-pop { animation-name: kilau-pop; animation-timing-function: ease-out; animation-fill-mode: both; }
.kilau-anim-fade-simple { animation-name: kilau-fade-simple; animation-timing-function: ease-out; animation-fill-mode: both; }

/* ---------------------------------------------------------------------
   Efek layar murni CSS (tanpa objek SVG) — pelangi, sinar, aurora,
   golden hour, embun/kilau, hujan tipis, halo.
   --------------------------------------------------------------------- */
.kilau-efek-layar {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kilau-pelangi {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 70%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 6px solid transparent;
  border-top-color: #ffb6a6;
  box-shadow:
    0 0 0 6px #fac775 inset,
    0 0 0 12px #9bcec1 inset,
    0 0 0 18px #67a2c5 inset;
  opacity: 0.6;
  animation: kilau-fade-simple 1.2s ease-out both;
}
.kilau-pelangi--kecil { width: 42%; opacity: 0.5; }

.kilau-halo {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 24px 10px rgba(255, 238, 200, 0.35);
  animation: kilau-fade-inout 4s ease-in-out infinite;
}

.kilau-rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 200deg at 62% 8%,
    rgba(255, 238, 200, 0.16) 0deg 4deg,
    transparent 4deg 10deg
  );
  mix-blend-mode: screen;
  animation: kilau-fade-inout 6s ease-in-out infinite;
}

.kilau-golden-hour {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 154, 108, 0.28), transparent 60%);
  animation: kilau-fade-simple 1.5s ease-out both;
}

.kilau-fajar-biru {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(103, 162, 197, 0.28), transparent 60%);
  animation: kilau-fade-simple 1.5s ease-out both;
}

.kilau-embun {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
  animation: kilau-kedip 2.4s ease-in-out infinite;
}

.kilau-gerimis {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(to bottom, rgba(191, 227, 238, 0), rgba(191, 227, 238, 0.55));
  animation: kilau-jatuh 0.7s linear infinite;
}

.kilau-aurora {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 40%;
  background: linear-gradient(120deg, rgba(155, 206, 193, 0.25), rgba(103, 162, 197, 0.2), rgba(255, 182, 166, 0.2));
  filter: blur(18px);
  animation: kilau-melayang 12s ease-in-out infinite;
}

.kilau-pohon-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 138, 0.55), transparent 70%);
  animation: kilau-fade-inout 2.5s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   prefers-reduced-motion — idle loop berhenti, elemen tetap tampil
   statis dengan fade sederhana (Bagian 7a "Aturan").
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kilau-obj,
  .kilau-efek-layar > *,
  .kilau-gerimis {
    animation-name: kilau-fade-simple !important;
    animation-duration: 0.4s !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
  }
}