/* ============================================================
   My Day — Bloom Garden + gamification visuals
   ============================================================ */

.level-card {
  background: linear-gradient(135deg, var(--lilac-100), var(--pink-100));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-sm);
}
.level-card__top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.level-badge {
  width: 56px; height: 56px; border-radius: 18px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--pink-400), var(--lilac-300));
  color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  box-shadow: var(--sh-md);
}

/* ============================================================
   LIVING GARDEN SCENE
   ============================================================ */
.gardenx {
  position: relative;
  height: 300px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--sh-inset);
  margin-bottom: var(--s-4);
  isolation: isolate;
  --grow: 1; /* drives the open-in animation */
  animation: gxFadeIn var(--dur-slow) var(--ease-out);
}
@keyframes gxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 520px) { .gardenx { height: 260px; } }

/* ---- sky (time of day) ---- */
.gx-sky { position: absolute; inset: 0; z-index: 0; transition: background 1.2s var(--ease-out); }
.is-day  .gx-sky { background: linear-gradient(180deg, #aee3ff 0%, #d9f2ff 45%, #eafaf0 100%); }
.is-dawn .gx-sky { background: linear-gradient(180deg, #ffd3a6 0%, #ffc6d9 40%, #fce8e0 100%); }
.is-dusk .gx-sky { background: linear-gradient(180deg, #ff9e7d 0%, #c98bbf 45%, #5e6aa8 100%); }
.is-night .gx-sky { background: linear-gradient(180deg, #2a2d57 0%, #3d3a6b 50%, #4a4178 100%); }

/* ---- stars (night only) ---- */
.gx-stars { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.is-night .gx-stars { opacity: 1; }
.gx-star {
  position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%;
  background: #fff; box-shadow: 0 0 4px #fff;
  animation: gxTwinkle 3s var(--ease-out) infinite; animation-delay: var(--d);
}
@keyframes gxTwinkle { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* ---- sun / moon ---- */
.gx-celestial {
  position: absolute; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
  top: 26px; right: 32px; transition: all 1.2s var(--ease-out);
}
.is-day .gx-celestial  { background: radial-gradient(circle, #fff6cf, var(--gold)); box-shadow: 0 0 40px rgba(255,214,107,.7); animation: gxSun 6s var(--ease-out) infinite; }
.is-dawn .gx-celestial { background: radial-gradient(circle, #fff0d8, #ffb877); box-shadow: 0 0 36px rgba(255,170,110,.6); top: 70px; }
.is-dusk .gx-celestial { background: radial-gradient(circle, #ffd9b0, #ff7e5f); box-shadow: 0 0 36px rgba(255,110,90,.55); top: 80px; }
.is-night .gx-celestial { background: radial-gradient(circle at 38% 38%, #fff, #e6e9ff 60%, #cfd4f5); box-shadow: 0 0 30px rgba(220,225,255,.5); }
@keyframes gxSun { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---- clouds ---- */
.gx-clouds { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.is-night .gx-clouds { opacity: 0.35; }
.gx-cloud {
  position: absolute; top: var(--top); left: -120px;
  width: 90px; height: 30px; border-radius: 30px;
  background: rgba(255,255,255,0.9); filter: blur(1px);
  transform: scale(var(--scale));
  animation: gxDrift var(--dur) linear infinite; animation-delay: var(--delay);
}
.gx-cloud::before, .gx-cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.gx-cloud::before { width: 42px; height: 42px; top: -18px; left: 14px; }
.gx-cloud::after  { width: 30px; height: 30px; top: -12px; left: 46px; }
@keyframes gxDrift { from { transform: translateX(0) scale(var(--scale)); } to { transform: translateX(calc(100vw + 240px)) scale(var(--scale)); } }

/* ---- hills (parallax) ---- */
.gx-hills { position: absolute; left: 0; right: 0; bottom: 30%; height: 46%; z-index: 3; }
.gx-hills::before, .gx-hills::after {
  content: ""; position: absolute; bottom: 0; left: -10%; right: -10%; border-radius: 50% 50% 0 0;
}
.gx-hills::before { height: 90%; background: #b6e3c2; opacity: 0.7; transform: translateX(-6%); }
.gx-hills::after  { height: 70%; background: #c9edd2; left: 20%; right: -30%; }
.is-dusk .gx-hills::before, .is-night .gx-hills::before { background: #6f7fa6; opacity: 0.6; }
.is-dusk .gx-hills::after, .is-night .gx-hills::after { background: #8493bd; opacity: 0.5; }

/* ---- field / ground ---- */
.gx-field {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: 4;
  background: linear-gradient(180deg, #cdebd4 0%, #b6e0bf 100%);
  border-top: 2px solid rgba(123,201,142,.45);
}
.is-dusk .gx-field, .is-night .gx-field { background: linear-gradient(180deg, #7fa088 0%, #6b8d74 100%); }

/* ---- grass ---- */
.gx-grass { position: absolute; left: 0; right: 0; bottom: 30%; height: 20px; z-index: 6; pointer-events: none; }
.gx-blade {
  position: absolute; bottom: 0; width: 3px; height: var(--h);
  background: linear-gradient(180deg, #8fd6a0, #5bb673);
  border-radius: 3px 3px 0 0; transform-origin: bottom center;
  transform: rotate(var(--rot));
  animation: gxSway 3.4s var(--ease-out) infinite; animation-delay: var(--d);
}
@keyframes gxSway { 0%,100% { transform: rotate(calc(var(--rot) - 5deg)); } 50% { transform: rotate(calc(var(--rot) + 5deg)); } }

/* ---- plant plots ---- */
.gx-plots {
  position: absolute; left: 0; right: 0; bottom: 4%; z-index: 7;
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: 0 var(--s-3); gap: 2px;
}
.gx-plot {
  position: relative; display: flex; flex-direction: column; align-items: center;
  transform-origin: bottom center;
  animation: gxGrow 700ms var(--ease-spring) backwards;
  animation-delay: calc(var(--i) * 90ms);
}
.gx-plot svg { transform-origin: bottom center; animation: gxPlantSway var(--sway) var(--ease-out) infinite; }
@keyframes gxGrow { from { transform: translateY(10px) scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gxPlantSway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.gx-plot__streak {
  font-size: 0.6rem; font-weight: 800; color: var(--ink-700);
  background: rgba(255,255,255,0.75); padding: 1px 6px; border-radius: var(--r-pill);
  margin-top: 2px; white-space: nowrap;
}
.is-night .gx-plot__streak { background: rgba(255,255,255,0.85); }
/* flower heads gently pulse on the most-grown plants */
.gx-plant--s5 .gx-flower, .gx-plant--s4 .gx-flower { animation: gxBloomPulse 4s var(--ease-out) infinite; transform-box: fill-box; }
@keyframes gxBloomPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---- floating motes (pollen/petals) ---- */
.gx-motes { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.gx-mote {
  position: absolute; bottom: -10px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff6c8, #ffd66b); opacity: 0.7;
  animation: gxFloat var(--dur) linear infinite; animation-delay: var(--delay);
}
.is-mood-perfect .gx-mote { background: radial-gradient(circle, #fff, #ffb3d1); }
@keyframes gxFloat {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translate(var(--drift), -320px); opacity: 0; }
}

/* ---- critters ---- */
.gx-critters { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.gx-butterfly { position: absolute; top: 30%; left: -30px; animation: gxFlit var(--dur) var(--ease-out) infinite; animation-delay: var(--delay); }
.gx-butterfly[style*="--path:1"] { top: 45%; animation-name: gxFlit2; }
.gx-butterfly[style*="--path:2"] { top: 22%; animation-name: gxFlit3; }
.gx-wing { transform-origin: 15px 12px; animation: gxFlap 0.18s linear infinite; }
.gx-wing--r { transform-origin: 15px 12px; }
@keyframes gxFlap { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(0.4); } }
@keyframes gxFlit {
  0% { transform: translate(0,0) rotate(0); } 25% { transform: translate(28vw,-24px) rotate(8deg); }
  50% { transform: translate(54vw,18px) rotate(-6deg); } 75% { transform: translate(80vw,-14px) rotate(6deg); }
  100% { transform: translate(110vw,6px) rotate(0); }
}
@keyframes gxFlit2 {
  0% { transform: translate(0,10px); } 30% { transform: translate(32vw,30px); }
  60% { transform: translate(62vw,-10px); } 100% { transform: translate(112vw,20px); }
}
@keyframes gxFlit3 {
  0% { transform: translate(0,-6px); } 40% { transform: translate(40vw,24px); }
  70% { transform: translate(72vw,-18px); } 100% { transform: translate(112vw,0); }
}
.gx-bee { position: absolute; top: 55%; left: -26px; animation: gxBee var(--dur) linear infinite; }
@keyframes gxBee {
  0% { transform: translate(0,0); } 20% { transform: translate(24vw,-30px); }
  40% { transform: translate(48vw,10px); } 60% { transform: translate(70vw,-20px); }
  80% { transform: translate(90vw,8px); } 100% { transform: translate(112vw,-10px); }
}

/* ---- companion pet ---- */
.gx-pet {
  position: absolute; bottom: 6%; left: 6%; z-index: 10; font-size: 2rem;
  animation: gxWander 16s var(--ease-out) infinite, gxHop 2.6s var(--ease-spring) infinite;
}
@keyframes gxWander { 0%,100% { left: 6%; } 25% { left: 30%; } 50% { left: 60%; transform: scaleX(-1); } 75% { left: 35%; } }
@keyframes gxHop { 0%,100% { bottom: 6%; } 14% { bottom: 11%; } 28% { bottom: 6%; } }

/* ---- caption ---- */
.gx-caption {
  position: absolute; left: 0; right: 0; top: 12px; z-index: 11; text-align: center;
  font-weight: 800; font-size: var(--fs-sm); color: var(--ink-900);
  text-shadow: 0 1px 6px rgba(255,255,255,0.6);
}
.is-night .gx-caption, .is-dusk .gx-caption { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

/* perfect-day glow */
.is-mood-perfect::after {
  content: ""; position: absolute; inset: 0; z-index: 12; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(255,214,107,0.35);
  animation: gxGlow 4s var(--ease-out) infinite;
}
@keyframes gxGlow { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gx-cloud, .gx-mote, .gx-butterfly, .gx-bee, .gx-pet, .gx-blade, .gx-plot, .gx-plot svg,
  .gx-celestial, .gx-star, .gx-flower, .is-mood-perfect::after { animation: none !important; }
  .gx-butterfly, .gx-bee { display: none; }
}
html[data-reduce-motion="1"] .gx-cloud,
html[data-reduce-motion="1"] .gx-mote,
html[data-reduce-motion="1"] .gx-butterfly,
html[data-reduce-motion="1"] .gx-bee,
html[data-reduce-motion="1"] .gx-pet,
html[data-reduce-motion="1"] .gx-blade,
html[data-reduce-motion="1"] .gx-plot svg,
html[data-reduce-motion="1"] .gx-celestial,
html[data-reduce-motion="1"] .gx-star { animation: none !important; }
html[data-reduce-motion="1"] .gx-butterfly, html[data-reduce-motion="1"] .gx-bee { display: none; }

/* ---------- Badges ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); }
.badge {
  text-align: center; padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md);
  background: var(--cream); border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease-spring);
}
.badge.is-earned { background: linear-gradient(160deg, var(--pink-100), var(--lilac-100)); border-color: var(--pink-200); }
.badge.is-earned:hover { transform: translateY(-4px) rotate(-2deg); }
.badge__icon { font-size: 2rem; margin-bottom: var(--s-2); filter: grayscale(1) opacity(0.35); }
.badge.is-earned .badge__icon { filter: none; animation: pop var(--dur) var(--ease-spring); }
.badge__name { font-size: var(--fs-xs); font-weight: 800; }
.badge__desc { font-size: 0.66rem; color: var(--text-muted); margin-top: 2px; }

/* ---------- Confetti ---------- */
.confetti-piece {
  position: fixed; top: -10px; z-index: 300;
  width: 10px; height: 14px; border-radius: 2px;
  pointer-events: none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.9; }
}

/* big celebration overlay */
.celebrate {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center; pointer-events: none;
}
.celebrate__card {
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); padding: var(--s-7) var(--s-6);
  text-align: center;
  animation: celebrateIn 600ms var(--ease-spring);
}
.celebrate__emoji { font-size: 4rem; animation: bob 1.6s var(--ease-out) infinite; }
.celebrate__title { font-family: var(--font-display); font-size: var(--fs-2xl); margin: var(--s-3) 0 var(--s-1); }
@keyframes celebrateIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.celebrate.out { animation: fade var(--dur) var(--ease-out) reverse forwards; }