.mushroom-garden {
  margin: 0 0 24px;
  padding: 12px 0;
  border-block: 2px solid #52775c;
  color: #263e2c;
}

.mushroom-garden[hidden], .garden-celebration[hidden], #gardenSettings[hidden] { display: none; }
.garden-heading, .garden-album-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.garden-heading h2 { font-size: 22px; line-height: 1.3; }
.garden-heading h3 { margin: 0; font-size: 20px; }
.garden-heading .small-button { flex-shrink: 0; min-height: 42px; padding: 0 10px; font-size: 15px; }
.garden-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: center;
  gap: 8px;
  min-height: 150px;
  margin-top: 12px;
  padding: 10px 16px;
  background: #e0f0d9;
}
.garden-day-count { color: #345a3c; font-size: 16px; font-weight: 900; }
.garden-growth-copy { min-width: 0; }
#gardenDayMessage { max-width: 27ch; font-size: 16px; line-height: 1.5; font-weight: 800; }
.garden-day-steps { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-height: 38px; margin: 3px 0; }
.garden-day-steps span { color: #79966f; font-size: 26px; line-height: 1.2; }
.garden-day-steps span.is-lit { color: #f4b421; -webkit-text-stroke: 1px #78500c; }
.garden-day-steps progress { width: 100%; height: 16px; accent-color: #397645; }
.mushroom-sprite {
  display: block;
  width: 100%;
  background-image: url('./mushrooms.png');
  background-size: 300% 200%;
  background-repeat: no-repeat;
}
/* Keep background artwork measurable in embedded browsers without aspect-ratio. */
.mushroom-sprite::before { content: ''; display: block; padding-top: 100%; }
.garden-mushroom {
  position: relative;
  width: 128px;
  align-self: end;
}
.garden-mushroom::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 72%;
  height: 9px;
  bottom: 2px;
  left: 14%;
  background: #b4caa7;
  border-radius: 50%;
}
.garden-mushroom .mushroom-sprite {
  position: relative;
  z-index: 1;
  transform: scale(var(--growth, 0.44));
  transform-origin: center 94%;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.is-blooming .garden-mushroom .mushroom-sprite { animation: mushroom-bloom 1.2s ease-out; }
.garden-week { display: flex; gap: 16px; align-items: center; padding-top: 12px; }
.garden-week-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.garden-week-copy strong { font-size: 16px; }
.garden-week-copy > span { font-size: 13px; line-height: 1.5; }
.garden-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 280px; }
.garden-day { display: grid; justify-items: center; gap: 2px; font-size: 12px; color: #425e48; }
.garden-day-mark { display: grid; place-items: center; width: 32px; height: 32px; background: #e5eddc; border-radius: 50%; font-size: 22px; }
.garden-day.is-today .garden-day-mark { outline: 2px solid #47714e; outline-offset: 2px; }
.garden-day.is-done .garden-day-mark { background: #fff0a8; }

.dialog.garden-album { width: min(calc(100% - 24px), 660px); max-height: 90vh; max-height: 90dvh; }
.garden-album .dialog-panel { background: #fcfcf4; }
.garden-album-heading { position: sticky; z-index: 2; top: -16px; margin: -1px -1px 0; padding: 8px 0 12px; background: #fcfcf4; }
.garden-album-heading h2 { font-size: 24px; line-height: 1.3; }
.garden-album-heading button { flex-shrink: 0; padding: 0 10px; font-size: 15px; }
.garden-collection-count { color: #526047; margin-bottom: 16px; font-size: 14px; font-weight: 800; }
.garden-sticker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.garden-sticker {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 6px 10px;
  border: 2px solid #c2ccba;
  border-radius: 8px;
  background: #edf0e8;
  color: #49583f;
  touch-action: manipulation;
}
.garden-sticker.is-owned { background: var(--sticker-paper); border-color: #393b2e; color: #29231b; box-shadow: 0 3px 0 #393b2e; }
.garden-sticker .mushroom-sprite { max-width: 142px; }
.garden-sticker:not(.is-owned) .mushroom-sprite { filter: grayscale(1); opacity: 0.3; }
.garden-sticker strong { font-size: 16px; line-height: 1.3; }
.garden-sticker-count { font-size: 12px; font-weight: 700; line-height: 1.4; }
.garden-sticker:focus-visible { outline: 3px solid #29609b; outline-offset: 3px; }
.garden-sticker.is-waving .mushroom-sprite { animation: mushroom-wave 750ms ease-out; }
.garden-picture-section { margin-top: 28px; border-top: 2px solid #b3c6a8; padding-top: 16px; }
.garden-picture-section .garden-heading { flex-wrap: wrap; margin-bottom: 12px; }
#gardenPuzzleCount { font-size: 14px; font-weight: 800; color: #495f40; }
.garden-puzzle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid #557047; gap: 2px; background: #557047; }
.garden-puzzle-piece { display: grid; place-items: center; min-width: 0; background: #e2ecd7; color: #9daf8b; font-size: 34px; background-size: 300% 200%; }
.garden-puzzle-piece::before { content: ''; grid-area: 1 / 1; width: 100%; padding-top: 100%; }
.garden-puzzle-piece > span { grid-area: 1 / 1; }
.garden-puzzle-piece.is-earned { background-image: url('./garden-picture.png'); }
.garden-settings-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.garden-settings-form .field { min-width: 0; }
.garden-settings-form .action-button { grid-column: 1 / -1; }

.garden-celebration {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  position: fixed;
  z-index: 11;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 450px);
  min-height: 142px;
  padding: 12px 18px 12px 8px;
  border: 3px solid #2c482e;
  border-radius: 8px;
  background: #fff0a8;
  box-shadow: 0 7px 0 #2c482e;
  color: #293b27;
  transform: translateX(-50%);
  pointer-events: none;
  animation: garden-arrive 250ms ease-out;
}
.garden-celebration-art { width: 110px; height: 110px; }
.garden-celebration-art .mushroom-sprite { animation: mushroom-wave 900ms ease-out; }
.garden-celebration strong { display: block; font-size: 23px; line-height: 1.4; }
.garden-celebration p { margin-top: 6px; font-size: 16px; line-height: 1.6; font-weight: 800; }
.garden-celebrating .toast { visibility: hidden; }
@keyframes garden-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes mushroom-bloom { 0% { transform: scale(0.55) rotate(-8deg); } 60% { transform: scale(1) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mushroom-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(6deg); } }
@media (max-width: 559px) {
  .garden-heading h2 { font-size: 20px; }
  .garden-today { grid-template-columns: minmax(0, 1fr) 112px; min-height: 140px; padding: 8px 12px; }
  .garden-mushroom { width: 112px; }
  .garden-day-steps { gap: 1px; }
  .garden-day-steps span { font-size: 23px; }
  #gardenDayMessage { font-size: 15px; }
  .garden-week { display: block; }
  .garden-week-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
  .garden-week-copy > span { font-size: 12px; }
  .garden-week-days { width: 100%; }
  .garden-album-heading h2 { font-size: 20px; }
  .garden-sticker-grid { gap: 8px; }
  .garden-sticker { padding: 5px 2px 8px; }
  .garden-sticker strong { font-size: 14px; }
  .garden-settings-form { grid-template-columns: 1fr; }
  .garden-celebration { grid-template-columns: 90px minmax(0, 1fr); min-height: 130px; }
  .garden-celebration-art { width: 90px; height: 90px; }
  .garden-celebration strong { font-size: 20px; }
  .garden-celebration p { font-size: 14px; }
}
.garden-water-button[hidden], .garden-planted[hidden] { display: none; }
.is-water-garden .garden-today { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) 176px; min-height: 215px; }
.is-water-garden .garden-mushroom { width: 176px; height: 176px; align-self: center; }
.is-water-garden .garden-mushroom::after { display: none; }
.growth-sprite {
  display: block;
  background: url('./growth-stages.png') no-repeat;
  background-size: 200% 200%;
  mix-blend-mode: multiply;
}
.garden-growth-scene, .garden-growth-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.garden-growth-scene { isolation: isolate; }
/* Each measured source rectangle fills a fixed square before its part transforms. */
.garden-growth-part {
  display: block; width: 100%; height: 100%;
  background: url('./growth-parts.webp') no-repeat;
}
.garden-growth-stem {
  z-index: 1; transform-origin: 50% 100%;
  transform: translateY(-15%) scale(var(--stem-width), var(--stem-height));
}
.garden-growth-cap-closed {
  z-index: 2; transform-origin: 50% 98%; opacity: var(--cap-closed);
  transform: translateY(calc(var(--cap-y) - 98%)) scale(var(--cap-width), var(--cap-height));
}
.garden-growth-cap-open {
  z-index: 3; transform-origin: 50% 83%; opacity: var(--cap-open);
  transform: translateY(calc(var(--cap-y) - 83%)) scale(var(--cap-width), var(--cap-height));
}
.garden-growth-soil { z-index: 4; transform-origin: 50% 100%; transform: translateY(-4%) scale(0.94, 0.26); }
.is-growing > .garden-growth-layer:not(.garden-growth-soil) {
  transition: transform var(--garden-growth-duration) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--garden-growth-duration) ease-in-out;
}
.garden-water-button {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 168px; max-width: 100%; min-height: 62px; margin-top: 10px; padding: 0 10px 0 0;
  background: #bfe6fa; color: #193f57; border: 2px solid #28434e; border-radius: 8px;
  box-shadow: 0 4px 0 #28434e; font-size: 17px; font-weight: 900;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.garden-water-button .garden-action-art { flex: 0 0 60px; height: 60px; }
.watering-can { background-image: url('./watering-can.png'); background-size: contain; background-position: center; background-repeat: no-repeat; }
.garden-water-button:disabled { background: #e0e7e5; color: #596b70; box-shadow: 0 2px 0 #63746e; border-color: #63746e; }
.garden-water-button:focus-visible { outline: 3px solid #29609b; outline-offset: 4px; }
.garden-water-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #28434e; }
.garden-water-button.is-planting { background: #ffe58b; color: #453f21; }
.garden-day-steps .garden-drop {
  display: block; width: 17px; height: 22px; margin: 3px 7px 3px 2px;
  background: #d4e0df; border: 2px solid #7b9ea6; border-radius: 70% 30% 60% 40%; transform: rotate(-35deg);
}
.garden-day-steps .garden-drop.is-lit { background: #58bce7; border-color: #277093; }
.garden-day-steps small { color: #3d6252; font-size: 13px; font-weight: 800; margin-left: 5px; }
.garden-planted { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 8px; background: #d0e7c8; border-bottom: 3px solid #749965; }
.garden-planted strong { font-size: 13px; margin-right: 8px; }
.garden-planted .mushroom-sprite { width: 44px; height: 44px; }
.is-daily-water #gardenDayCount, .is-daily-water #gardenDayMessage, .is-daily-water #waterGardenLabel { display: none; }
.is-daily-water .garden-today {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 284px; padding: 76px 16px 16px; gap: 12px;
}
.is-daily-water .garden-growth-copy { display: grid; justify-items: center; justify-self: center; width: 100%; max-width: 200px; }
.is-daily-water .garden-mushroom { justify-self: center; width: 100%; max-width: 176px; height: auto; }
.is-daily-water .garden-mushroom::before { content: ''; display: block; padding-top: 100%; }
.is-daily-water .garden-day-steps { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; width: 100%; gap: 6px; margin: 0 0 12px; min-height: 36px; }
.is-daily-water .garden-drop {
  position: relative; width: 23px; height: 30px; margin: 0;
  background: #798d89; border-color: #536c66;
  transition: background-color 250ms, border-color 250ms;
}
.is-daily-water .garden-drop::after {
  content: ''; position: absolute; top: 5px; left: 4px; width: 4px; height: 9px;
  border-radius: 50%; background: #e4faff; opacity: 0.2;
}
.is-daily-water .garden-drop.is-lit { background: #35b8ef; border-color: #176687; }
.is-daily-water .garden-drop.is-lit::after { opacity: 1; }
.is-daily-water .garden-water-button {
  position: relative; width: 132px; height: 132px; min-height: 0; padding: 3px; margin: 0;
  background: transparent; border: 2px solid transparent; box-shadow: none; opacity: 1; mix-blend-mode: multiply;
}
.is-daily-water .garden-water-button .garden-action-art { flex: 0 0 122px; width: 122px; height: 122px; }
.is-daily-water .garden-water-button:not(.is-ready):not(.is-planting) .garden-action-art { filter: grayscale(1); opacity: 0.65; }
.is-daily-water .garden-water-button.is-ready .garden-action-art { filter: none; opacity: 1; }
.is-daily-water .garden-water-button:active:not(:disabled) { box-shadow: none; }
.is-daily-water .garden-water-button.is-spent::after {
  content: ''; position: absolute; right: 8px; bottom: 12px; width: 14px; height: 24px;
  border-right: 5px solid #317243; border-bottom: 5px solid #317243; transform: rotate(40deg);
}
.is-watering .garden-water-button .garden-action-art, .is-watering .garden-water-button::after { visibility: hidden; }
.garden-water-flight {
  position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); z-index: 4;
  pointer-events: none; mix-blend-mode: multiply;
  animation: watering-travel 2800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.garden-water-flight .watering-can { width: 100%; height: 100%; animation: watering-tilt 2800ms ease-in-out both; }
.garden-pour-drop {
  position: absolute; top: 80%; left: calc(8% + var(--i) * 3px); width: 6px; height: 11px;
  border-radius: 60% 40% 60% 40%; background: #249dd1; opacity: 0;
  animation: watering-drops 400ms linear 3; animation-delay: calc(900ms + var(--i) * 45ms);
}
@keyframes watering-travel {
  0%, 100% { transform: translate(var(--sx), var(--sy)); }
  26%, 78% { transform: translate(var(--x), var(--y)); }
}
@keyframes watering-tilt { 0%, 23%, 82%, 100% { transform: rotate(0); } 34%, 72% { transform: rotate(-28deg); } }
@keyframes watering-drops { 0% { opacity: 0; transform: translateY(0); } 15%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--fall)); } }
@media (max-width: 559px) {
  .is-water-garden .garden-today { grid-template-columns: minmax(0, 1fr) 128px; min-height: 210px; gap: 4px; padding: 10px; }
  .is-water-garden .garden-mushroom { width: 128px; height: 128px; }
  .is-water-garden .garden-day-count { font-size: 14px; }
  .garden-water-button { min-height: 56px; font-size: 15px; padding-right: 6px; gap: 0; }
  .garden-water-button .garden-action-art { flex-basis: 46px; height: 46px; }
}
@media (max-width: 359px) {
  .is-water-garden .garden-today { grid-template-columns: minmax(0, 1fr) 102px; }
  .is-water-garden .garden-mushroom { width: 102px; height: 102px; }
  .garden-water-button { font-size: 14px; }
  .garden-water-button .garden-action-art { flex-basis: 38px; height: 38px; }
}
@media (max-width: 559px) {
  .is-daily-water .garden-today { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 252px; padding: 66px 10px 14px; gap: 10px; }
  .is-daily-water .garden-mushroom { max-width: 148px; }
  .is-daily-water .garden-day-steps { gap: 4px; max-width: 156px; }
  .is-daily-water .garden-drop { width: 18px; height: 25px; }
  .is-daily-water .garden-water-button { width: 112px; height: 112px; }
  .is-daily-water .garden-water-button .garden-action-art { flex-basis: 102px; width: 102px; height: 102px; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-mushroom .mushroom-sprite { transition: none; }
  .is-blooming .garden-mushroom .mushroom-sprite, .garden-sticker.is-waving .mushroom-sprite, .garden-celebration { animation: none; }
  .garden-celebration-art .mushroom-sprite, .garden-water-flight, .garden-water-flight .watering-can, .garden-pour-drop { animation: none; }
  .is-growing > .garden-growth-layer { transition: none; }
  .is-daily-water .garden-drop { transition: none; }
}