/* ═══════════════════════════════════════════════
   TAMAN AMAL — Garden of Deeds · styles
   Scoped to .wm-app tokens (parchment · sage · gold · clay).
   Companion to wm.css.
   ═══════════════════════════════════════════════ */

/* tree svg */
.tm-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tm-sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tm-sway 6s ease-in-out infinite alternate;
}
@keyframes tm-sway {
  from { transform: rotate(-1.3deg); }
  to   { transform: rotate(1.3deg); }
}

/* ── Pokok Amal card placed inside the Ibadah Harian page ── */
.ih-taman { padding: 0 20px 6px; }
.ih-taman .tm-card { margin: 10px 0 0; }

/* ── POKOK AMAL card (Home) ── */
.tm-card {
  position: relative; overflow: hidden;
  display: flex; gap: 15px; align-items: stretch;
  margin: 12px 18px 0; padding: 16px 18px 17px;
  border-radius: 22px;
  background: linear-gradient(158deg, #FBF7EF 0%, #F2EAD7 100%);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(60,50,30,0.07);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.13s ease;
}
.tm-card:active { transform: scale(0.99); }
.tm-card-motif {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cg fill='none' stroke='%23B08A45' stroke-opacity='0.07' stroke-width='1'%3E%3Crect x='8' y='8' width='38' height='38'/%3E%3Crect x='8' y='8' width='38' height='38' transform='rotate(45 27 27)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 54px 54px;
}
.tm-card-tree {
  position: relative; flex-shrink: 0;
  width: 76px; align-self: flex-end; height: 104px;
}
.tm-card-body { position: relative; flex: 1; min-width: 0; }
.tm-card-eye {
  font-family: var(--ui); font-size: 10px; font-weight: 800;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold);
}
.tm-card-name {
  font-family: var(--serif); font-size: 24px; font-weight: 700;
  color: var(--ink); line-height: 1.02; margin-top: 3px;
}
.tm-card-poet {
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  color: var(--ink2); line-height: 1.3; margin-top: 3px;
}
.tm-card-meta {
  font-family: var(--ui); font-size: 11px; color: var(--ink3);
  margin-top: 9px; line-height: 1.4;
}
.tm-card-ded {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--green);
}
.tm-card-ded svg { flex-shrink: 0; }
.tm-card-water { margin-top: 11px; }
.tm-card-water-row {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ui); font-size: 11px; font-weight: 600; color: var(--greenMid);
}
.tm-water-bar {
  height: 5px; border-radius: 3px; background: var(--line);
  overflow: hidden; margin-top: 6px;
}
.tm-water-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #6E9277, #3C6B54);
  transition: width 0.4s ease;
}
.tm-card-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 13px;
  font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--goldD);
}
.tm-card-link span { transition: transform 0.15s ease; }
.tm-card:active .tm-card-link span { transform: translateX(3px); }

/* ── TAMAN AMAL screen ── */
.tm-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 2px;
}
.tm-guide-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px 6px 10px; border-radius: 20px;
  background: var(--white); border: 1px solid var(--line);
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--ink2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tm-guide-btn svg { color: var(--gold); }
.tm-guide-btn:active { transform: scale(0.96); }

/* Panduan Taman guide sheet */
.tm-g-head { text-align: center; padding: 2px 6px 4px; }
.tm-g-head-ar { font-family: var(--ar); font-size: 22px; color: var(--gold); direction: rtl; line-height: 1; }
.tm-g-head-title { font-family: var(--serif); font-size: 27px; font-weight: 700; color: var(--ink); margin-top: 5px; }
.tm-g-head-sub { font-family: var(--ui); font-size: 12px; color: var(--ink2); margin-top: 6px; line-height: 1.5; }
.tm-g-sec {
  text-align: left; margin: 18px 0 2px;
  font-family: var(--ui); font-size: 10px; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink3);
}
.tm-g-row { display: flex; gap: 13px; align-items: center; text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line2); }
.tm-g-row:last-of-type { border-bottom: none; }
.tm-g-ic {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
}
.tm-g-ic .tm-svg { height: 46px; width: 30px; }
.tm-g-drop { color: var(--green); display: flex; }
.tm-g-drop svg { width: 20px; height: 20px; }
.tm-g-tx { flex: 1; min-width: 0; }
.tm-g-name { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.tm-g-desc { font-family: var(--ui); font-size: 11.5px; color: var(--ink2); line-height: 1.45; margin-top: 3px; }
.tm-g-ded {
  display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center;
  margin-top: 16px; font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--green);
}

.tm-head { text-align: center; padding: 12px 26px 2px; }
.tm-head-ar {
  font-family: var(--ar); font-size: 30px; color: var(--gold);
  line-height: 1; direction: rtl;
}
.tm-head-title {
  font-family: var(--serif); font-size: 38px; font-weight: 700;
  color: var(--ink); line-height: 1; margin-top: 8px; letter-spacing: 0.3px;
}
.tm-head-sub {
  font-family: var(--ui); font-size: 12.8px; color: var(--ink2);
  line-height: 1.6; margin: 11px auto 0; max-width: 304px;
}
.tm-head-sub b { color: var(--green); font-weight: 700; }

.tm-summary {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 26px 2px;
}
.tm-summary .wm-rule { width: 78px; }
.tm-summary-tx {
  font-family: var(--ui); font-size: 12px; font-weight: 500;
  color: var(--ink2); letter-spacing: 0.2px;
}
.tm-summary-tx b { color: var(--green); font-weight: 700; }

/* ── year switcher (orchard across the years) ── */
.tm-yearbar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 26px 0;
}
.tm-yr-btn {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line);
  font-family: var(--ui); font-size: 17px; color: var(--ink2); line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.tm-yr-btn:active:not([disabled]) { transform: scale(0.92); }
.tm-yr-btn[disabled] { opacity: 0.32; cursor: default; }
.tm-yr-label {
  min-width: 168px; white-space: nowrap; text-align: center;
  font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink);
}

/* ── the grove: a living sky over terraced earth shelves ── */
.tm-grove {
  position: relative; overflow: hidden;
  margin: 16px 14px 0; border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(60,50,30,0.10);
  transition: background 1.2s ease;
}
/* sky phases (by waktu solat) */
.tm-grove.sky-malam   { background: linear-gradient(180deg, #182039 0%, #243152 55%, #34406A 100%); }
.tm-grove.sky-subuh   { background: linear-gradient(180deg, #3C4E78 0%, #B98473 64%, #E7C6A4 100%); }
.tm-grove.sky-siang   { background: linear-gradient(180deg, #8FB7D8 0%, #BBD6E6 58%, #E2ECEE 100%); }
.tm-grove.sky-petang  { background: linear-gradient(180deg, #9FBFD2 0%, #D8C7A6 66%, #ECDBB6 100%); }
.tm-grove.sky-maghrib { background: linear-gradient(180deg, #3A356A 0%, #B85F3C 54%, #F3A85B 100%); }

/* stars — night only */
.tm-sky-stars { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.tm-grove.sky-malam .tm-sky-stars { opacity: 1; }
.tm-star {
  position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #FBF4DD; box-shadow: 0 0 4px 1px rgba(251,244,221,0.7);
  animation: tm-twinkle 3.4s ease-in-out infinite alternate;
}
@keyframes tm-twinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* sun + moon */
.tm-sun, .tm-moon { position: absolute; z-index: 0; display: none; transition: left 12s linear, top 12s linear, opacity 1.2s ease; }
.tm-sun {
  width: 34px; height: 34px; border-radius: 50%; right: 26px; top: 24px;
  background: radial-gradient(circle at 42% 40%, #FFF6DA, #F4C260);
  box-shadow: 0 0 26px 8px rgba(244,194,90,0.45);
}
.tm-grove.sky-subuh .tm-sun  { display: block; right: 30px; top: 58px; box-shadow: 0 0 26px 9px rgba(232,150,110,0.4); background: radial-gradient(circle at 42% 40%, #FFE7C8, #E98B6A); }
.tm-grove.sky-siang .tm-sun  { display: block; right: 32px; top: 18px; }
.tm-grove.sky-petang .tm-sun { display: block; right: 30px; top: 40px; }
.tm-grove.sky-maghrib .tm-sun{ display: block; right: 34px; top: 66px; width: 40px; height: 40px; background: radial-gradient(circle at 42% 40%, #FFE0B0, #E2682F); box-shadow: 0 0 34px 12px rgba(226,104,47,0.5); }
.tm-grove.sky-malam .tm-moon { display: block; right: 28px; top: 22px; }
.tm-moon { filter: drop-shadow(0 0 8px rgba(242,232,204,0.5)); }

/* garden body sits above the sky */
.tm-garden { position: relative; z-index: 1; display: flex; flex-direction: column; }
.tm-bed { position: relative; }
.tm-bed-earth {
  position: absolute; left: 0; right: 0; top: 96px; bottom: 0; z-index: 0;
  background: linear-gradient(180deg, #E6DABF 0%, #D9CAA8 30%, #CFBE99 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.30), inset 0 -3px 8px rgba(120,95,55,0.14);
}
.tm-bed-earth::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(120,95,55,0.18);
}
.tm-bed-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  padding: 0 7px;
}
.tm-plot {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease;
}
.tm-plot:not(.future):active { transform: translateY(-2px); }
.tm-plot.future { cursor: default; opacity: 0.62; }
.tm-tree { position: relative; z-index: 1; width: 100%; height: 118px; }
.tm-plot.now::before {
  content: ''; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
  width: 94px; height: 74px; z-index: 0;
  background: radial-gradient(ellipse at center 60%, rgba(255,228,150,0.34), transparent 70%);
}
.tm-plot.holy::before {
  content: ''; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 90px; z-index: 0;
  background: radial-gradient(ellipse at center 55%, rgba(255,243,206,0.28), transparent 72%);
}
.tm-plot-lab { position: relative; z-index: 2; width: 100%; padding-bottom: 9px; }
.tm-plot-mon {
  width: 100%; margin-top: 2px; text-align: center;
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  color: var(--ink); line-height: 1.06; letter-spacing: -0.1px;
}
.tm-plot.now .tm-plot-mon { color: var(--goldD); }
.tm-plot-stage {
  width: 100%; margin-top: 2px; text-align: center;
  font-family: var(--ui); font-size: 9.5px; font-weight: 600; color: var(--greenD);
}
.tm-plot.future .tm-plot-stage { color: var(--ink3); }
.tm-plot-meta {
  width: 100%; margin-top: 2px; text-align: center; white-space: nowrap;
  font-family: var(--ui); font-size: 9.5px; color: #8A7E62;
}
.tm-plot-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 4;
  font-family: var(--ui); font-size: 8px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--goldD);
  background: var(--goldBg); padding: 2px 7px; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(60,50,30,0.25);
}

/* a quiet visiting hoopoe — perches on the crown of its palm */
.tm-bird {
  position: absolute; z-index: 3; top: 42px; left: 47%;
  transform-origin: bottom center;
  opacity: 0;
  animation: tm-bird-visit 17s ease-in-out infinite;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.22));
}
@keyframes tm-bird-visit {
  0%, 12%  { opacity: 0; transform: translate(7px, -7px) rotate(4deg); }
  19%, 60% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  38%      { transform: translate(0, -2px) rotate(0deg); }   /* a small settle/hop */
  68%, 100%{ opacity: 0; transform: translate(-6px, -8px) rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) { .tm-bird { animation: none; opacity: 1; } }

/* a bee drifting among the blossoms */
.tm-bee {
  position: absolute; z-index: 3; top: 40px; left: 38%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
  animation: tm-bee-drift 9s ease-in-out infinite;
}
@keyframes tm-bee-drift {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  25%  { transform: translate(16px, -10px) rotate(6deg); }
  50%  { transform: translate(28px, 4px) rotate(-3deg); }
  75%  { transform: translate(10px, 12px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .tm-bee { animation: none; } }

/* season wash — tints only the open sky (behind the palms) */
.tm-season-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; transition: background 1.2s ease; }
.tm-grove.season-spring .tm-season-wash { background: linear-gradient(180deg, rgba(120,180,120,0.12), transparent 60%); }
.tm-grove.season-summer .tm-season-wash { background: linear-gradient(180deg, rgba(240,190,90,0.12), transparent 60%); }
.tm-grove.season-autumn .tm-season-wash { background: linear-gradient(180deg, rgba(210,130,60,0.14), transparent 60%); }
.tm-grove.season-winter .tm-season-wash { background: linear-gradient(180deg, rgba(150,180,220,0.14), transparent 60%); }

/* hot haze (Terik) — bleached, hazy amber whiteout + heat shimmer */
.tm-haze { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease;
  background:
    radial-gradient(120% 70% at 78% 14%, rgba(255,244,196,0.55), transparent 52%),
    linear-gradient(180deg, rgba(255,238,196,0.34) 0%, rgba(255,222,150,0.30) 55%, rgba(252,210,128,0.42) 100%); }
.tm-grove.weather-haze .tm-haze { opacity: 1; animation: tm-haze-shim 6s ease-in-out infinite alternate; }
@keyframes tm-haze-shim { from { opacity: 0.82; } to { opacity: 1; } }
/* heat shimmer — wavering bands rising off the ground */
.tm-shimmer { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.0) 0px, rgba(255,255,255,0.18) 4px, rgba(255,255,255,0.0) 9px); }
.tm-grove.weather-haze .tm-shimmer { opacity: 0.7; animation: tm-shimmer-a 2.4s ease-in-out infinite; }
@keyframes tm-shimmer-a { 0% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.04); } 100% { transform: translateY(0) scaleY(1); } }
/* the sun bakes: bigger, white-hot, fierce glow */
.tm-grove.weather-haze .tm-sun {
  width: 50px; height: 50px;
  background: radial-gradient(circle at 48% 46%, #FFFFFF 0%, #FFF3C8 42%, #F6C658 100%);
  box-shadow: 0 0 60px 26px rgba(255,236,170,0.75), 0 0 120px 50px rgba(255,222,140,0.35);
}

/* rain */
.tm-rainf, .tm-snowf { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; display: none; }
.tm-grove.weather-rain .tm-rainf { display: block; }
.tm-grove.weather-snow .tm-snowf { display: block; }
.tm-rain { position: absolute; top: -16px; width: 1.5px; height: 15px; border-radius: 1px;
  background: linear-gradient(rgba(210,225,240,0), rgba(210,225,240,0.75));
  animation-name: tm-rainfall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes tm-rainfall { from { transform: translateY(0); } to { transform: translateY(640px); } }
/* storm rain: heavier, brighter, driven on a slant */
.tm-grove.weather-storm .tm-rain { width: 2px; height: 22px; background: linear-gradient(rgba(220,232,245,0), rgba(225,236,248,0.92)); }
.tm-grove.weather-storm .tm-rainf { display: block; transform: skewX(-12deg); }
.tm-snow { position: absolute; top: -10px; width: 5px; height: 5px; border-radius: 50%;
  background: #FBF7EF; box-shadow: 0 0 3px rgba(255,255,255,0.6);
  animation-name: tm-snowfall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes tm-snowfall {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(14px, 620px); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .tm-rain, .tm-snow, .tm-haze { animation: none; } }

/* drifting clouds (tinted by sky + weather) */
.tm-clouds { position: absolute; left: 0; right: 0; top: 22px; height: 62px; z-index: 1; pointer-events: none; overflow: hidden; }
.tm-cloud { position: absolute; }
.tm-cloud path { fill: rgba(255,255,255,0.7); transition: fill 1.2s ease; }
.tm-cloud.c1 { top: 6px; animation: tm-cloud-a 74s linear infinite; }
.tm-cloud.c2 { top: 30px; opacity: 0.6; animation: tm-cloud-b 98s linear infinite; }
.tm-cloud.c3 { top: -2px; opacity: 0.5; animation: tm-cloud-a 118s linear infinite; animation-delay: -50s; }
@keyframes tm-cloud-a { from { transform: translateX(-140px); } to { transform: translateX(430px); } }
@keyframes tm-cloud-b { from { transform: translateX(430px); } to { transform: translateX(-140px); } }
.tm-grove.sky-malam .tm-cloud path { fill: rgba(180,186,205,0.30); }
.tm-grove.sky-maghrib .tm-cloud path { fill: rgba(255,224,188,0.5); }
.tm-grove.sky-subuh .tm-cloud path { fill: rgba(255,236,214,0.55); }
.tm-grove.weather-rain .tm-cloud path { fill: rgba(150,156,168,0.88); }
.tm-grove.weather-storm .tm-cloud path { fill: rgba(70,74,90,0.94); }
.tm-grove.weather-snow .tm-cloud path { fill: rgba(226,230,238,0.92); }
.tm-grove.sky-malam.weather-clear .tm-cloud, .tm-grove.sky-malam.weather-haze .tm-cloud { opacity: 0.25; }

/* overcast — weather greys the sky */
.tm-overcast { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
  background: linear-gradient(180deg, rgba(120,126,140,0.34), rgba(96,102,116,0.55)); }
.tm-grove.weather-rain .tm-overcast { opacity: 1; }
.tm-grove.weather-snow .tm-overcast { opacity: 0.72; background: linear-gradient(180deg, rgba(182,188,202,0.4), rgba(150,158,176,0.5)); }
.tm-grove.weather-storm .tm-overcast { opacity: 1; background: linear-gradient(180deg, rgba(58,62,76,0.62), rgba(38,42,56,0.72)); }
.tm-grove.weather-rain .tm-sun, .tm-grove.weather-storm .tm-sun, .tm-grove.weather-snow .tm-sun,
.tm-grove.weather-rain .tm-moon, .tm-grove.weather-storm .tm-moon, .tm-grove.weather-snow .tm-moon { opacity: 0.28; }

/* lightning flash (storm) */
.tm-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: rgba(255,255,255,0.85); }
.tm-grove.weather-storm .tm-flash { animation: tm-flash-a 7.5s linear infinite; }
@keyframes tm-flash-a {
  0%, 90%, 100% { opacity: 0; }
  91% { opacity: 0.65; } 92% { opacity: 0.08; } 93.5% { opacity: 0.5; } 95% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tm-cloud, .tm-flash { animation: none; } }

/* lightning bolt — strikes from a cloud during a storm */
.tm-bolt { position: absolute; top: 16px; left: 30%; z-index: 2; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 7px rgba(206,224,255,0.9)) drop-shadow(0 0 16px rgba(255,255,255,0.6)); }
.tm-grove.weather-storm .tm-bolt { animation: tm-bolt-a 7.5s linear infinite; }
@keyframes tm-bolt-a {
  0%, 89.5%, 100% { opacity: 0; }
  90% { opacity: 1; transform: translateY(0); }
  91.5% { opacity: 0.1; }
  93% { opacity: 0.95; }
  95.5% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tm-bolt { animation: none; } }

/* resting camel (unta) — tucked behind trees/labels on the earth shelf */
.tm-camel-w { position: absolute; z-index: 0; bottom: 3px; left: 6px; pointer-events: none; }
.tm-camel-w.right { left: auto; right: 6px; transform: scaleX(-1); }
.tm-camel { display: block; width: 66px; height: auto; filter: drop-shadow(0 2px 3px rgba(60,46,28,0.18)); animation: tm-camel-breathe 5.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes tm-camel-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }
@media (prefers-reduced-motion: reduce) { .tm-camel { animation: none; } }

/* blessed-tree companions (olive, fig) + seven-ears of grain — tucked behind the palms */
.tm-companion-w { position: absolute; z-index: 0; bottom: 3px; left: 4px; pointer-events: none; }
.tm-companion-w.right { left: auto; right: 4px; }
.tm-companion-w.wheat { bottom: 4px; }
.tm-companion { display: block; filter: drop-shadow(0 2px 3px rgba(60,46,28,0.16)); }
.tm-wheat { display: block; animation: tm-wheat-sway 4.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes tm-wheat-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .tm-wheat { animation: none; } }

/* high flock of birds glorifying Allah — drifts across on a long loop */
.tm-flock { position: absolute; top: 14px; left: 0; width: 44px; height: 26px; z-index: 1; pointer-events: none;
  opacity: 0; animation: tm-flock-cross 26s linear infinite; }
.tm-flock-b { position: absolute; animation: tm-flock-flap 0.9s ease-in-out infinite; }
@keyframes tm-flock-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } }
@keyframes tm-flock-cross {
  0% { opacity: 0; transform: translate(-60px, 18px); }
  10% { opacity: 0.85; }
  82% { opacity: 0.85; }
  92%, 100% { opacity: 0; transform: translate(390px, -22px); }
}
.tm-grove.weather-storm .tm-flock, .tm-grove.weather-rain .tm-flock, .tm-grove.weather-snow .tm-flock,
.tm-grove.sky-malam .tm-flock { display: none; }
@media (prefers-reduced-motion: reduce) { .tm-flock { animation-duration: 0s; opacity: 0; } .tm-flock-b { animation: none; } }

/* thunder-as-tasbih caption — only during a storm */
.tm-thunder {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; text-align: center;
  font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(245,247,230,0.92); text-shadow: 0 1px 4px rgba(20,24,36,0.7);
  opacity: 0; transition: opacity 0.8s ease; pointer-events: none;
}
.tm-grove.weather-storm .tm-thunder { opacity: 1; }

/* weather preview inside the Panduan guide */
.tm-g-wx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.tm-g-wxauto.on { border-color: var(--greenMid); background: rgba(94,138,111,0.12); color: var(--greenD); }
.tm-g-wxb {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--white);
  color: var(--ink2); font-family: var(--ui); font-size: 10px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tm-g-wxb.on { border-color: var(--gold); background: var(--goldBg); color: var(--goldD); }
.tm-g-note { font-family: var(--ui); font-size: 11.5px; color: var(--ink2); line-height: 1.5; margin-top: 6px; text-align: left; }
.tm-g-note-sm { font-size: 10.5px; color: var(--ink3); margin-top: 8px; }

/* weather preview control */
.tm-weather-btn {
  position: absolute; z-index: 4; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 20px; border: none;
  background: rgba(30,28,22,0.34); color: #FBF7EF; backdrop-filter: blur(3px);
  font-family: var(--ui); font-size: 10.5px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tm-weather-btn:active { transform: scale(0.96); }

/* grapevine garland draped across the top of the grove */
.tm-vine { position: absolute; top: 0; left: 0; width: 100%; height: 64px; z-index: 2; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }

/* ants marching across the earth beneath the lushest palm */
.tm-ants { position: absolute; left: 0; right: 0; top: 104px; height: 12px; z-index: 2; pointer-events: none; overflow: hidden; }
.tm-ant-w { position: absolute; bottom: 0; animation: tm-march 15s linear infinite; }
.tm-ant { display: block; }
@keyframes tm-march {
  0%   { transform: translateX(-24px); }
  100% { transform: translateX(380px); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-ant-w { animation-duration: 0s; }
  .tm-ant-w:nth-child(2) { transform: translateX(120px); }
  .tm-ant-w:nth-child(3) { transform: translateX(220px); }
  .tm-ant-w:nth-child(4) { transform: translateX(320px); }
}

/* keepsake button */
.tm-keep {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 12px 18px 0; width: calc(100% - 36px); padding: 13px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--white); color: var(--ink2);
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.tm-keep:active:not([disabled]) { transform: scale(0.99); }
.tm-keep[disabled] { opacity: 0.6; cursor: default; }
.tm-keep svg { color: var(--goldD); }

/* ── watering moment: a drop falls onto the palm, then it shimmers ── */
.tm-drop {
  position: absolute; z-index: 4; top: -4px; left: 50%; margin-left: -3px;
  width: 6px; height: 8px; opacity: 0; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: radial-gradient(circle at 36% 30%, #CFEBDC, #6E9277);
}
.tm-watering .tm-drop { animation: tm-drop-fall 0.66s ease-in forwards; }
@keyframes tm-drop-fall {
  0%   { opacity: 0; transform: translateY(0) scale(0.7); }
  18%  { opacity: 1; }
  72%  { opacity: 1; transform: translateY(46px) scale(1); }
  100% { opacity: 0; transform: translateY(54px) scale(0.4); }
}
.tm-watering .tm-svg { animation: tm-shimmer 0.85s ease 0.46s; }
@keyframes tm-shimmer {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.16) saturate(1.12); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-watering .tm-drop, .tm-watering .tm-svg { animation: none; }
}

/* water CTA */
.tm-cta {
  display: flex; align-items: center; gap: 13px;
  margin: 18px 18px 0; padding: 14px 16px; border-radius: 18px;
  background: var(--greenBg); border: 1px solid #D9E6DC;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.tm-cta:active { transform: scale(0.99); }
.tm-cta-ic {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #F4EBD4;
}
.tm-cta-ic svg { width: 17px; height: 17px; }
.tm-cta-body { flex: 1; min-width: 0; }
.tm-cta-t { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--greenD); }
.tm-cta-s { font-family: var(--ui); font-size: 11.5px; color: var(--greenMid); margin-top: 2px; }
.tm-cta .wm-chev { color: var(--greenMid); }

@media (prefers-reduced-motion: reduce) {
  .tm-sway { animation: none; }
}

/* ── per-tree detail sheet ── */
.tm-sheet-wrap {
  position: absolute; inset: 0; z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none; visibility: hidden;
}
.tm-sheet-wrap.show { pointer-events: auto; visibility: visible; }
.tm-sheet-bd {
  position: absolute; inset: 0;
  background: rgba(40,35,25,0.40);
  opacity: 0; transition: opacity 0.28s ease;
}
.tm-sheet-wrap.show .tm-sheet-bd { opacity: 1; }
.tm-sheet {
  position: relative; width: 100%; max-height: 88%; overflow-y: auto;
  background: var(--paper); border-radius: 26px 26px 0 0;
  padding: 10px 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
  box-shadow: 0 -16px 40px rgba(40,35,25,0.25);
  transform: translateY(101%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.tm-sheet-wrap.show .tm-sheet { transform: none; }
.tm-sheet-handle { width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 4px auto 6px; }
.tm-sheet-tree { width: 118px; height: 138px; margin: 4px auto 2px; }
.tm-sheet-mon { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; }
.tm-sheet-mon span { font-size: 16px; color: var(--gold); font-weight: 600; }
.tm-sheet-stage {
  font-family: var(--ui); font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--green); margin-top: 8px;
}
.tm-sheet-poet { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink2); margin-top: 4px; }
.tm-sheet-stat { font-family: var(--ui); font-size: 12.5px; color: var(--ink2); margin-top: 13px; line-height: 1.5; }
.tm-sheet-stat b { color: var(--green); font-weight: 700; }
.tm-sheet-callbl {
  font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--ink3); margin-top: 20px;
}
.tm-cal { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 11px 2px 0; }
.tm-cal-d { aspect-ratio: 1; border-radius: 50%; background: var(--line); }
.tm-cal-d.on { background: var(--greenMid); }
.tm-cal-d.today { background: var(--gold); box-shadow: 0 0 0 2px var(--goldBg); }
.tm-sheet-ded {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--green);
}
.tm-sheet-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 18px; padding: 14px; border: none; border-radius: 16px;
  background: var(--green); color: #F4EBD4;
  font-family: var(--ui); font-size: 14px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tm-sheet-cta svg { stroke: #F4EBD4; }
.tm-sheet-cta:active { transform: scale(0.99); }
.tm-sheet-close {
  display: block; width: 100%; margin-top: 10px; padding: 12px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  color: var(--ink2); font-family: var(--ui); font-size: 13px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .tm-sheet, .tm-sheet-wrap { transition: none; }
}