/* Garden scene v2: one continuous illustrated field with twelve interactive planting spots. */
.garden-root {
  width: 100% !important;
  min-height: var(--cf-viewport-height, 100dvh) !important;
  background: #27491f !important;
}

.garden-screen.garden-beds-refresh {
  --garden-cream: #fff1bd;
  --garden-scene-offset: 0px;
  position: relative !important;
  isolation: isolate;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 8px !important;
  align-content: start !important;
  width: 100% !important;
  min-height: var(--cf-viewport-height, 100dvh) !important;
  padding: 8px 10px max(12px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(8, 27, 15, .06) 0 25%, transparent 38% 78%, rgba(12, 27, 11, .16) 100%),
    url('/assets/garden-background-v20261027-3.webp') center top / 100% 100% no-repeat !important;
}

.garden-screen.garden-beds-refresh::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9, 35, 19, .12), transparent 27%),
    linear-gradient(90deg, rgba(9, 30, 14, .10), transparent 11% 89%, rgba(9, 30, 14, .10)) !important;
}

.garden-screen.garden-beds-refresh .garden-top {
  position: relative !important;
  z-index: 30 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  margin: 0 0 7px !important;
}

.garden-screen.garden-beds-refresh .garden-back-button {
  position: relative !important;
  z-index: 30 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: 78px !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  color: #fff0bc !important;
  border: 1px solid rgba(255, 220, 137, .80) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 30% 0, rgba(255, 236, 180, .18), transparent 45%),
    linear-gradient(145deg, rgba(128, 76, 31, .98), rgba(62, 34, 17, .98)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 4px 0 rgba(48, 26, 12, .87), 0 8px 15px rgba(0, 0, 0, .25) !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .72) !important;
  font-size: 13px !important;
}

.garden-screen.garden-beds-refresh .garden-back-button:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 2px 0 rgba(48, 26, 12, .87) !important;
}

.garden-screen.garden-beds-refresh .garden-title-card {
  position: relative !important;
  z-index: 30 !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(255, 222, 144, .78) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 14% 0, rgba(255, 229, 157, .18), transparent 44%),
    linear-gradient(145deg, rgba(91, 54, 25, .96), rgba(37, 55, 27, .95)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 4px 0 rgba(44, 28, 14, .78), 0 8px 16px rgba(0, 0, 0, .23) !important;
  backdrop-filter: blur(3px);
  text-align: left !important;
}

.garden-screen.garden-beds-refresh .garden-title-card h1 {
  margin: 0 !important;
  color: #ffe49a !important;
  font-size: clamp(18px, 5vw, 22px) !important;
  line-height: 1 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .72) !important;
}

.garden-screen.garden-beds-refresh .garden-title-card p {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 5px 8px !important;
  color: rgba(255, 246, 214, .95) !important;
  border: 1px solid rgba(244, 215, 145, .34) !important;
  border-radius: 999px !important;
  background: rgba(13, 43, 23, .62) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.garden-screen.garden-beds-refresh .garden-status-bar {
  position: relative !important;
  z-index: 35 !important;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: min(88%, 390px) !important;
  min-height: 26px !important;
  margin: 9px auto 0 !important;
  padding: 5px 14px !important;
  color: #fff1bd !important;
  border: 1px solid rgba(255, 225, 155, .48) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(52, 35, 16, .86), rgba(25, 67, 34, .88), rgba(52, 35, 16, .86)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 4px 10px rgba(0, 0, 0, .22) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.garden-screen.garden-beds-refresh .garden-status-bar.is-ready {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  pointer-events: none !important;
}

/* The controls align with the twelve planting hollows painted into the scene. */
.garden-screen.garden-beds-refresh .garden-plots {
  position: absolute !important;
  z-index: 8 !important;
  top: 26% !important;
  left: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 47.5% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  place-items: stretch !important;
  margin: 0 !important;
  padding: 0 1.4% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.garden-screen.garden-beds-refresh .garden-plots::before {
  display: none !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card {
  position: relative !important;
  z-index: 1;
  isolation: isolate;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 48% !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: transform .14s ease, filter .14s ease !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12% 5% 11%;
  pointer-events: none;
  border: 1px solid transparent;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%, rgba(255, 233, 166, .04), transparent 64%);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.garden-screen.garden-beds-refresh .garden-plot-card:not(:disabled):hover,
.garden-screen.garden-beds-refresh .garden-plot-card:not(:disabled):focus-visible {
  z-index: 5;
  transform: translateY(-2px) scale(1.035) !important;
  filter: brightness(1.08) !important;
  outline: none !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card:not(:disabled):hover::before,
.garden-screen.garden-beds-refresh .garden-plot-card:not(:disabled):focus-visible::before {
  border-color: rgba(255, 239, 190, .42);
  background: radial-gradient(ellipse at 50% 58%, rgba(255, 229, 147, .17), transparent 70%);
  box-shadow: 0 0 18px rgba(255, 221, 126, .20);
}

.garden-screen.garden-beds-refresh .garden-plot-card:active:not(:disabled) {
  transform: translateY(1px) scale(.985) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-base-img {
  display: none !important;
}

.garden-screen.garden-beds-refresh .garden-plot-plant-img {
  z-index: 3 !important;
  width: 66% !important;
  height: 66% !important;
  bottom: 28% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 4px rgba(35, 18, 6, .50)) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card:nth-child(-n + 4) .garden-plot-plant-img {
  width: 62% !important;
  height: 62% !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card:nth-child(n + 5):nth-child(-n + 8) .garden-plot-plant-img {
  width: 66% !important;
  height: 66% !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card:nth-child(n + 9) .garden-plot-plant-img {
  width: 70% !important;
  height: 70% !important;
}

.garden-screen.garden-beds-refresh .garden-plot-grass-img {
  z-index: 4 !important;
  width: 72% !important;
  height: 53% !important;
  bottom: 23% !important;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .30)) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-number {
  z-index: 8 !important;
  top: 9% !important;
  left: 9% !important;
  display: grid !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  place-items: center;
  color: #fff1ba !important;
  border: 1px solid rgba(255, 220, 137, .70) !important;
  border-radius: 8px !important;
  background: linear-gradient(150deg, #8f5a2a, #4a2a15) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 3px 5px rgba(0, 0, 0, .34) !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

.garden-screen.garden-beds-refresh .garden-plot-action-img {
  z-index: 8 !important;
  top: 9% !important;
  right: 7% !important;
  box-sizing: border-box !important;
  width: 30px !important;
  height: 30px !important;
  padding: 5px !important;
  border: 1px solid rgba(218, 238, 205, .64) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 25%, #4f9c5b, #235b34 72%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 4px 8px rgba(0, 0, 0, .34) !important;
  filter: none !important;
}

.garden-screen.garden-beds-refresh .garden-plot-empty-mark {
  z-index: 4 !important;
  top: 51% !important;
  left: 50% !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center;
  transform: translate(-50%, -50%) !important;
  color: #fff0a9 !important;
  border: 1px solid rgba(255, 229, 160, .72) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 28%, rgba(86, 147, 70, .98), rgba(33, 82, 38, .98) 72%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 4px 9px rgba(0, 0, 0, .34) !important;
  font-size: 23px !important;
  line-height: 1 !important;
}

.garden-screen.garden-beds-refresh .garden-plot-status {
  z-index: 9 !important;
  right: auto !important;
  bottom: 3% !important;
  left: 50% !important;
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: 94% !important;
  min-width: 58px !important;
  min-height: 23px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 8px !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  color: #fff1bf !important;
  border: 1px solid rgba(250, 217, 141, .66) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(119, 73, 32, .97), rgba(57, 32, 15, .98)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 3px 0 rgba(46, 24, 11, .70), 0 5px 9px rgba(0, 0, 0, .26) !important;
  font-size: clamp(8.5px, 2.15vw, 10px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card.is-empty .garden-plot-status {
  color: #efffd8 !important;
  border-color: rgba(188, 229, 150, .65) !important;
  background: linear-gradient(#5e8d43, #2f6033) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card.is-grown::before {
  border-color: rgba(255, 224, 116, .26);
  background: radial-gradient(ellipse at 50% 58%, rgba(255, 221, 99, .16), transparent 70%);
  box-shadow: 0 0 18px rgba(255, 215, 93, .16);
}

.garden-screen.garden-beds-refresh .garden-plot-card.is-grown .garden-plot-status {
  color: #fff4ae !important;
  border-color: rgba(255, 229, 130, .82) !important;
  background: linear-gradient(#a57622, #614014) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card.needs-water .garden-plot-status {
  color: #edfaff !important;
  border-color: rgba(160, 220, 247, .80) !important;
  background: linear-gradient(#3985aa, #20536f) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card.has-weeds .garden-plot-status {
  color: #f3ffd8 !important;
  border-color: rgba(183, 226, 125, .76) !important;
  background: linear-gradient(#568e40, #2e612d) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card.is-locked {
  filter: saturate(.55) brightness(.78) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-card.is-locked::before {
  inset: 13% 6% 12%;
  border: 1px dashed rgba(235, 220, 178, .42);
  background:
    repeating-linear-gradient(145deg, rgba(88, 82, 61, .20) 0 7px, rgba(43, 52, 36, .18) 7px 14px),
    radial-gradient(ellipse at 50% 57%, rgba(64, 75, 51, .58), rgba(39, 45, 31, .22) 70%, transparent 72%);
}

.garden-screen.garden-beds-refresh .garden-plot-lock {
  z-index: 7 !important;
  top: 51% !important;
  left: 50% !important;
  width: 28px !important;
  height: 23px !important;
  transform: translate(-50%, -50%) !important;
  border: 2px solid #ecd79c !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #806742, #403426) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .40) !important;
}

.garden-screen.garden-beds-refresh .garden-plot-lock::before {
  top: -14px !important;
  left: 5px !important;
  width: 14px !important;
  height: 14px !important;
  border-color: #ecd79c !important;
}

.garden-screen.garden-beds-refresh .garden-plot-lock::after {
  top: 6px !important;
  left: 11px !important;
}

.garden-screen.garden-beds-refresh .garden-loading {
  position: relative !important;
  z-index: 40 !important;
  grid-column: 1 / -1;
}

/* Plant catalogue and confirmations use the same materials as the garden scene. */
.garden-screen.garden-beds-refresh .plant-select-backdrop,
.garden-screen.garden-beds-refresh .garden-confirm-backdrop {
  box-sizing: border-box !important;
  position: fixed !important;
  z-index: 1200 !important;
  inset: 0 auto 0 50% !important;
  width: min(100vw, var(--game-shell-width, 480px)) !important;
  max-width: var(--game-shell-width, 480px) !important;
  min-height: 100dvh !important;
  transform: translateX(-50%);
  padding: 14px !important;
  background: rgba(3, 12, 7, .76) !important;
  backdrop-filter: blur(7px);
}

.garden-screen.garden-beds-refresh .plant-select-modal,
.garden-screen.garden-beds-refresh .garden-confirm-modal {
  box-sizing: border-box !important;
  width: min(100%, 400px) !important;
  max-width: 400px !important;
  border: 1px solid rgba(246, 216, 142, .72) !important;
  border-radius: 21px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(132, 181, 88, .20), transparent 43%),
    linear-gradient(155deg, rgba(17, 57, 33, .99), rgba(43, 27, 14, .99)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 18px 42px rgba(0, 0, 0, .58) !important;
}

.garden-screen.garden-beds-refresh .plant-select-list {
  scrollbar-width: none;
}

.garden-screen.garden-beds-refresh .plant-select-list::-webkit-scrollbar {
  display: none;
}

.garden-screen.garden-beds-refresh .plant-select-item {
  color: #fff0c1 !important;
  border: 1px solid rgba(241, 211, 137, .42) !important;
  background: linear-gradient(105deg, rgba(106, 151, 74, .22), rgba(8, 29, 17, .78)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 4px 9px rgba(0, 0, 0, .25) !important;
}

@media (max-width: 380px) {
  .garden-screen.garden-beds-refresh {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    padding-inline: 7px !important;
  }

  .garden-screen.garden-beds-refresh .garden-back-button {
    width: 70px !important;
    font-size: 12px !important;
  }

  .garden-screen.garden-beds-refresh .garden-title-card {
    padding-inline: 9px !important;
  }

  .garden-screen.garden-beds-refresh .garden-title-card p {
    padding-inline: 6px !important;
    font-size: 9px !important;
  }

  .garden-screen.garden-beds-refresh .garden-plots {
    padding-inline: .5% !important;
  }

  .garden-screen.garden-beds-refresh .garden-plot-number {
    left: 5% !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
  }

  .garden-screen.garden-beds-refresh .garden-plot-action-img {
    right: 4% !important;
    width: 27px !important;
    height: 27px !important;
  }

  .garden-screen.garden-beds-refresh .garden-plot-status {
    min-width: 52px !important;
    padding-inline: 6px !important;
    font-size: 8px !important;
  }
}

@media (max-height: 740px) {
  .garden-screen.garden-beds-refresh .garden-top {
    margin-bottom: 5px !important;
  }

  .garden-screen.garden-beds-refresh .garden-back-button,
  .garden-screen.garden-beds-refresh .garden-title-card {
    min-height: 42px !important;
  }

  .garden-screen.garden-beds-refresh .garden-status-bar {
    min-height: 23px !important;
    margin-top: 5px !important;
    padding-block: 4px !important;
  }

  .garden-screen.garden-beds-refresh .garden-plot-status {
    min-height: 20px !important;
    padding-block: 3px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .garden-screen.garden-beds-refresh .garden-status-bar,
  .garden-screen.garden-beds-refresh .garden-plot-card,
  .garden-screen.garden-beds-refresh .garden-plot-card::before {
    transition: none !important;
  }
}