/* ══════════════════════════════════════════════════════════════
   Vườn mới — lớp nền sống động cho khu vườn (đi kèm vuon-moi.js)
   Chỉ thêm lớp trang trí; không đụng vào phần chơi.
   ══════════════════════════════════════════════════════════════ */

/* bức tranh chính nằm giữa các lớp mới */
#garden > svg:not(.vm-l) { position: relative; z-index: 3; }

/* màu đêm/chiều giờ do lớp ánh sáng lo — bỏ bộ lọc phủ xám cũ */
#garden[data-sky="dem"] .g-world,
#garden[data-sky="chieu"] .g-world,
#garden[data-sky="sang"] .g-world { filter: none; }

.vm-l {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: block;
}
#vm-sky   { z-index: 0; will-change: transform; transform: scale(1.06); }
#vm-rays  { z-index: 1; }
#vm-cloud { z-index: 1; will-change: transform; }
#vm-far   { z-index: 2; will-change: transform; transform: scale(1.04); }
#vm-shade { z-index: 4; mix-blend-mode: multiply; }
#vm-glow  { z-index: 5; mix-blend-mode: screen; }
#vm-fx    { z-index: 6; }
#vm-fog   { z-index: 6; overflow: hidden; }
#vm-grade { z-index: 7; }

/* ── sao lấp lánh: ba nhóm thôi cho máy nhẹ ── */
.vm-tw1 { animation: vmTw 3.8s ease-in-out infinite; }
.vm-tw2 { animation: vmTw 5.2s ease-in-out -1.7s infinite; }
.vm-tw3 { animation: vmTw 2.9s ease-in-out -0.8s infinite; }
@keyframes vmTw { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* đèn lồng & cửa sổ chập chờn */
.vm-flick  { animation: vmFlick 2.6s ease-in-out infinite; }
.vm-flick2 { animation: vmFlick 3.4s ease-in-out -1.1s infinite; }
@keyframes vmFlick { 0%,100% { opacity: 1 } 40% { opacity: .78 } 60% { opacity: .92 } 75% { opacity: .7 } }

/* ── tia nắng xoay rất chậm ── */
#vm-rays { overflow: hidden; }
#vm-rays i {
  position: absolute; width: 220vmax; height: 220vmax; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 244, 214, .0) 0deg 7deg, rgba(255, 244, 214, .22) 9deg 12deg,
    rgba(255, 244, 214, .0) 14deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 4%, rgba(0,0,0,.55) 14%, transparent 46%);
          mask: radial-gradient(circle, #000 0 4%, rgba(0,0,0,.55) 14%, transparent 46%);
  animation: vmSpin 140s linear infinite;
  mix-blend-mode: soft-light;
}
#garden[data-sky="chieu"] #vm-rays i { filter: hue-rotate(-18deg) saturate(1.6); opacity: .8; }
@keyframes vmSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── mây mềm, trôi bằng GPU ── */
#vm-cloud { overflow: hidden; }
#vm-cloud b {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c, rgba(255,255,255,.9)), transparent);
  animation: vmDrift var(--d, 160s) linear infinite;
  animation-delay: var(--dl, 0s);
}
#vm-cloud b::before, #vm-cloud b::after {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c, rgba(255,255,255,.9)), transparent);
}
#vm-cloud b::before { width: 70%; height: 120%; left: 8%; top: -42%; }
#vm-cloud b::after  { width: 55%; height: 95%; left: 42%; top: -26%; }
@keyframes vmDrift {
  from { transform: translateX(-40vw); }
  to   { transform: translateX(140vw); }
}

/* ── sương trôi ── */
#vm-fog i {
  position: absolute; left: -50%; width: 200%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--f, rgba(250,248,240,.7)), transparent);
  animation: vmFog var(--d, 60s) ease-in-out infinite alternate;
}
@keyframes vmFog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* ── chuyển màu & viền tối quanh khung ── */
#vm-grade {
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vig, rgba(40,30,20,.28)) 100%);
}
#garden[data-sky="dem"]   #vm-grade { --vig: rgba(4, 6, 24, .62); }
#garden[data-sky="chieu"] #vm-grade { --vig: rgba(70, 28, 40, .34); }
#garden[data-troi="mua"]  #vm-grade { --vig: rgba(20, 28, 40, .45); }

/* trăng ban đêm có quầng, cầu vồng đêm thành "cầu vồng trăng" mờ */
#garden[data-sky="dem"] .g-rain.is-in { opacity: .16; filter: saturate(.3) brightness(1.6); }
/* đồ vật trên trời (mây, chim, bóng bay, diều) phải chìm theo màn đêm */
#garden[data-sky="dem"] .g-item:is([data-kind="cloud"],[data-kind="bird"],[data-kind="balloon"],[data-kind="kite"]) {
  filter: brightness(.55) saturate(.6) hue-rotate(-12deg); }
#garden[data-sky="chieu"] .g-item:is([data-kind="cloud"],[data-kind="bird"],[data-kind="balloon"],[data-kind="kite"]) {
  filter: sepia(.35) saturate(1.2) brightness(.95); }
#garden[data-troi="mua"] .g-item[data-kind="cloud"] { filter: grayscale(.6) brightness(.82); }

/* mưa giờ vẽ bằng canvas — tắt vệt mưa cũ, giữ chút u ám */
#g-troi.troi-mua i { display: none; }
#g-troi.troi-mua { background: rgba(70, 90, 110, .10); }

/* ── lúc bước vào vườn ── */
#garden.vm-enter #vm-sky   { animation: vmSkyIn 2.2s cubic-bezier(.2,.7,.2,1) both; }
#garden.vm-enter #vm-far   { animation: vmRise 2.4s cubic-bezier(.2,.8,.2,1) both; }
#garden.vm-enter #vm-cloud { animation: vmFade 3s ease both; }
#garden.vm-enter #vm-glow  { animation: vmFade 2.8s ease .6s both; }
@keyframes vmSkyIn { from { opacity: 0; filter: brightness(.4); } to { opacity: 1; filter: none; } }
@keyframes vmRise  { from { opacity: 0; translate: 0 6%; } to { opacity: 1; translate: 0 0; } }
@keyframes vmFade  { from { opacity: 0; } to { opacity: 1; } }

/* ── lời chào mỗi lần quay lại ── */
#vm-chao {
  position: fixed; left: 50%; top: max(34vh, 268px); z-index: 49;
  transform: translate(-50%, 10px); text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2,.8,.2,1);
  width: min(86vw, 520px);
  color: #FFFAF0;
  text-shadow: 0 2px 18px rgba(30, 20, 40, .45), 0 1px 2px rgba(30, 20, 40, .35);
}
#vm-chao.is-in { opacity: 1; transform: translate(-50%, 0); }
#vm-chao small {
  display: inline-block; font: 600 11px/1 var(--ui, system-ui);
  letter-spacing: .22em; text-transform: uppercase; opacity: .85;
  padding: 6px 12px; border-radius: 99px; margin-bottom: 10px;
  background: rgba(255, 250, 240, .16); border: 1px solid rgba(255, 250, 240, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#vm-chao strong {
  display: block; font: 700 clamp(28px, 7.4vw, 52px)/1.1 var(--hand, cursive);
  font-variation-settings: "INFM" 40, "BNCE" 30;
}
#vm-chao > span { display: block; margin-top: 8px; font: 500 clamp(14px, 3.6vw, 18px)/1.4 var(--hand, cursive); opacity: .92; }
#vm-chao .vm-w { display: inline-block; white-space: nowrap; }
#vm-chao strong .vm-ch { display: inline-block; opacity: 0; transform: translateY(14px) rotate(-6deg);
  animation: vmCh .7s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes vmCh { to { opacity: 1; transform: none; } }
#garden:is([data-sky="sang"],[data-sky="trua"]) ~ #vm-chao { color: #3A3550; text-shadow: 0 1px 14px rgba(255,250,240,.8); }
body:not(.is-garden) #vm-chao, body.trong-nha #vm-chao { display: none; }

@media (prefers-reduced-motion: reduce) {
  #vm-rays i, #vm-cloud b, #vm-fog i, .vm-tw1, .vm-tw2, .vm-tw3, .vm-flick, .vm-flick2 { animation: none; }
  #garden.vm-enter * { animation: none !important; }
}