/* garden.css — Vườn nhỏ: cây luôn hiển thị ở GÓC TRÁI-DƯỚI trang chủ, nền trong suốt như PNG. */

.ttcg{
  position:fixed; left:16px; bottom:14px; z-index:1400; width:182px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:inherit;
}
.ttcg__plant{
  position:relative; width:182px; height:190px; cursor:pointer;
  transform-origin:50% 92%;
  filter:drop-shadow(0 8px 6px rgba(40,30,15,.26));
  transition:filter .2s, transform .15s;
}
.ttcg__plant:hover{ filter:drop-shadow(0 11px 9px rgba(40,30,15,.34)) brightness(1.04); transform:translateY(-2px); }
.ttcg__plant:active{ transform:translateY(1px) scale(.98); }
.ttcg__plant svg{ width:100%; height:100%; overflow:visible; }
/* ĐANG CHỜ (đã tưới) → cây xám, không có chấm đỏ; có đếm ngược dưới chậu.
   ĐANG TƯỚI ĐƯỢC → cây tươi màu bình thường. */
.ttcg:not([data-ready="1"]) .ttcg__plant{ filter:grayscale(1) brightness(.92) drop-shadow(0 8px 6px rgba(40,30,15,.22)); }
.ttcg:not([data-ready="1"]) .ttcg__plant:hover{ filter:grayscale(1) brightness(.96) drop-shadow(0 9px 7px rgba(40,30,15,.28)); transform:translateY(-1px); }
.ttcg:not([data-ready="1"]) .ttcg__bar,
.ttcg:not([data-ready="1"]) .ttcg__zz{ opacity:.55; }
.ttcg.is-watering .ttcg__plant{ animation:ttcg-bounce .85s ease; }
@keyframes ttcg-bounce{ 0%,100%{transform:translateY(0) scale(1,1);} 30%{transform:translateY(3px) scale(1.03,.97);} 62%{transform:translateY(-5px) scale(.98,1.04);} }
.ttcg.is-grow .ttcg__plant{ animation:ttcg-grow .85s cubic-bezier(.34,1.56,.64,1); }
@keyframes ttcg-grow{ 0%{transform:scale(.5);} 70%{transform:scale(1.06);} 100%{transform:scale(1);} }
.ttcg.is-nudge .ttcg__plant{ animation:ttcg-nudge .5s ease; }
@keyframes ttcg-nudge{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(-4deg);} 75%{transform:rotate(4deg);} }

/* z Z ngủ — chỉ ban đêm (data-theme dark) */
.ttcg__zz{ opacity:0; transition:opacity .4s; }
html[data-theme="dark"] .ttcg__zz{ opacity:1; animation:ttcg-zz 2.8s ease-in-out infinite; }
@keyframes ttcg-zz{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(-6px); opacity:1; } }

/* giọt nước */
.ttcg__drops{ position:absolute; left:0; top:0; width:182px; height:130px; pointer-events:none; opacity:0; z-index:3; }
.ttcg__drops i{ position:absolute; top:8%; width:7px; height:11px; border-radius:0 65% 65% 65%; background:#6fc3ff; transform:rotate(45deg); opacity:0; box-shadow:0 0 6px #6fc3ff66; }
.ttcg__drops i:nth-child(1){left:38%;} .ttcg__drops i:nth-child(2){left:48%;} .ttcg__drops i:nth-child(3){left:58%;}
.ttcg__drops i:nth-child(4){left:44%;} .ttcg__drops i:nth-child(5){left:64%;}
.ttcg.is-watering .ttcg__drops{ opacity:1; }
.ttcg.is-watering .ttcg__drops i{ animation:ttcg-drop .75s ease-in forwards; }
.ttcg.is-watering .ttcg__drops i:nth-child(2){animation-delay:.08s;}
.ttcg.is-watering .ttcg__drops i:nth-child(3){animation-delay:.16s;}
.ttcg.is-watering .ttcg__drops i:nth-child(4){animation-delay:.24s;}
.ttcg.is-watering .ttcg__drops i:nth-child(5){animation-delay:.12s;}
@keyframes ttcg-drop{ 0%{top:6%;opacity:0;} 18%{opacity:1;} 100%{top:52%;opacity:0;} }

/* thanh tiến độ + gợi ý + đếm ngược (không còn nút) */
.ttcg__bar{ width:120px; height:7px; border-radius:999px; overflow:hidden;
  background:color-mix(in oklab, var(--text-3) 32%, transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.18); }
.ttcg__fill{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#8ed98a,#57b85f); transition:width .5s cubic-bezier(.4,0,.2,1); }
.ttcg__hint{ font-size:11px; font-weight:700; color:#fff; white-space:nowrap;
  background:linear-gradient(180deg,#62c66a,#46a64f); padding:4px 11px; border-radius:999px;
  box-shadow:0 3px 8px -3px rgba(70,166,79,.6); animation:ttcg-hint 1.8s ease-in-out infinite; }
@keyframes ttcg-hint{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
.ttcg__timer{ display:none; font-size:11px; color:var(--text-2); font-weight:700; text-align:center; font-variant-numeric:tabular-nums;
  background:color-mix(in oklab, var(--surface) 80%, transparent); padding:3px 10px; border-radius:999px; }
/* chấm đỏ báo tới giờ tưới */
.ttcg[data-ready="1"] .ttcg__plant::after{
  content:''; position:absolute; top:8px; right:24px; width:15px; height:15px; border-radius:50%;
  background:#ff4d4f; border:2px solid #fff; box-shadow:0 0 0 2px rgba(255,77,79,.35);
  animation:ttcg-pulse 1.4s ease-in-out infinite; z-index:5;
}
.ttcg:not([data-ready="1"]) .ttcg__hint{ display:none; }
@keyframes ttcg-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.25);} }

/* câu chúc giữa màn hình */
.ttcg__cheer{ position:fixed; inset:0; z-index:1600; display:none; align-items:center; justify-content:center; pointer-events:none; }
.ttcg.is-cheering .ttcg__cheer{ display:flex; }
.ttcg__cheer-box{ text-align:center; padding:24px 30px; border-radius:22px;
  background:color-mix(in oklab, var(--surface) 92%, transparent);
  border:1px solid color-mix(in oklab, #57b85f 40%, transparent);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 6px color-mix(in oklab,#57b85f 12%, transparent);
  animation:ttcg-cpop .5s cubic-bezier(.34,1.56,.64,1), ttcg-cout .5s ease 2.5s forwards; }
@keyframes ttcg-cpop{ from{transform:scale(.6) translateY(14px);opacity:0;} to{transform:scale(1);opacity:1;} }
@keyframes ttcg-cout{ to{transform:scale(.96) translateY(-8px);opacity:0;} }
.ttcg__cheer-ic{ font-size:36px; margin-bottom:8px; }
.ttcg__cheer-text{ font-family:'Lora', Georgia, serif; font-weight:700; font-size:clamp(18px,4.5vw,24px); color:var(--text); max-width:18ch; line-height:1.4; margin:0 auto; }

/* popup vật phẩm */
.ttcg__reward{ position:fixed; inset:0; z-index:1620; display:none; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--surface) 70%, transparent); backdrop-filter:blur(2px); }
.ttcg.is-reward .ttcg__reward{ display:flex; }
.ttcg__reward-card{ text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:22px;
  padding:22px 26px; box-shadow:0 30px 70px -20px rgba(0,0,0,.55); animation:ttcg-cpop .5s cubic-bezier(.34,1.56,.64,1); max-width:300px; }
.ttcg__reward-burst{ font-size:32px; animation:ttcg-burst 1s ease infinite; }
@keyframes ttcg-burst{ 0%,100%{transform:scale(1) rotate(-6deg);} 50%{transform:scale(1.18) rotate(6deg);} }
.ttcg__reward-t{ font-weight:800; font-size:14px; color:var(--text); margin-top:2px; }
.ttcg__reward-name{ font-family:'Lora', Georgia, serif; font-weight:700; font-size:18px; color:var(--text); margin:3px 0 12px; }
.ttcg__reward-prev{ display:flex; gap:16px; justify-content:center; align-items:center; }
.ttcg__reward-av{ position:relative; width:56px; height:56px; flex-shrink:0; }
.ttcg__reward-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.ttcg__reward-ring{ position:absolute; inset:-4px; border-radius:50%; pointer-events:none; }
.ttcg__reward-bub{ font-size:12px; padding:8px 12px; border-radius:12px; background:var(--surface-2); color:var(--text-2); max-width:130px; text-align:left; line-height:1.4; }
.ttcg__reward-up{ font-size:11.5px; color:var(--text-3); margin-top:12px; }
.ttcg__confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ttcg__confetti i{ position:absolute; top:-12px; width:8px; height:12px; border-radius:2px; animation:ttcg-cfetti 1.9s linear forwards; }
@keyframes ttcg-cfetti{ to{ transform:translateY(420px) rotate(560deg); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .ttcg__plant, .ttcg__drops i, .ttcg__zz, .ttcg__reward-burst, .ttcg__confetti i, .ttcg[data-ready="1"] .ttcg__plant::after, .ttcg__hint{ animation:none !important; }
}
/* thu nhỏ trên mobile để không che nội dung */
@media (max-width: 600px){
  .ttcg{ left:10px; bottom:10px; width:140px; }
  .ttcg__plant{ width:140px; height:148px; }
  .ttcg__drops{ width:140px; }
  .ttcg__bar{ width:104px; }
}