/* =====================================================================
   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 {
  /* Warna scene — TIDAK mengikuti tema gelap/terang OS, murni jam lokal */
  --pohon-langit-pagi-1: #ffebd3;
  --pohon-langit-pagi-2: #bfe3ee;
  --pohon-langit-siang-1: #bfe3ee;
  --pohon-langit-siang-2: #ffebd3;
  --pohon-langit-malam-1: #0a0e16;
  --pohon-langit-malam-2: #101620;

  --pohon-bukit-jauh: #b7d8c9;
  --pohon-bukit-jauh-malam: #172230;
  --pohon-bukit-dekat: #9bcec1;
  --pohon-bukit-dekat-malam: #101a26;

  --pohon-tanah: #8b6b4f;
  --pohon-tanah-permukaan: #6b4f3a;
  --pohon-tanah-malam: #241a12;
  --pohon-tanah-permukaan-malam: #170f0a;

  --pohon-rumput: #6f9151;
  --pohon-rumput-malam: #33422a;

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

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

  /* PRD v1.4 Bagian 7 — pengayaan latar (bayangan, batu, siluet, burung) */
  --pohon-bayangan: #5a4530;
  --pohon-batu: #726052;
  --pohon-burung-warna: #3d3330;
  --pohon-siluet-jauh: #4e6b5f;

  /* === TEMA PINK (ochaa24thn) — override token brand === */
  --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.10), transparent 60%),
    radial-gradient(ellipse 70% 55% at 15% 90%, rgba(244, 114, 182, 0.05), 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;
}