:root {
  --bg: #000000;
  --panel: #18150f;
  --panel-soft: #211b13;
  --soil-top: #8a6442;
  --soil-bottom: #34200f;
  --soil-locked: #291c12;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --line: rgba(255, 255, 255, 0.18);
  --focus: #ffffff;
  --green-a: #5b8023;
  --green-b: #31612b;
  --green-c: #141c12;
  --neutral-a: #6b6f70;
  --neutral-b: #44494b;
  --neutral-c: #1c2021;
  --tier-common: #74787a;
  --tier-uncommon: #4f7f37;
  --tier-rare: #356fa2;
  --tier-epic: #7647a5;
  --radial-x: 50%;
  --radial-y: 8%;
  --radial-shift-x: 0%;
  --radial-shift-y: 0%;
  --danger-a: #7d4b36;
  --danger-b: #4a2720;
  --farm-4-width: 414px;
  --store-control-width: 382px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000000;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

html[data-nav-direction="up"] {
  --radial-x: 50%;
  --radial-y: 0%;
  --radial-shift-x: 0%;
  --radial-shift-y: 24%;
}

html[data-nav-direction="down"] {
  --radial-x: 50%;
  --radial-y: 100%;
  --radial-shift-x: 0%;
  --radial-shift-y: -24%;
}

html[data-nav-direction="left"] {
  --radial-x: 0%;
  --radial-y: 50%;
  --radial-shift-x: 24%;
  --radial-shift-y: 0%;
}

html[data-nav-direction="right"] {
  --radial-x: 100%;
  --radial-y: 50%;
  --radial-shift-x: -24%;
  --radial-shift-y: 0%;
}

body {
  display: grid;
  place-items: center;
}

button {
  border: 0;
  color: inherit;
  font: inherit;
}

.device {
  position: relative;
  display: grid;
  grid-template-columns: 500px 84px;
  gap: 4px;
  width: 600px;
  height: 600px;
  padding: 20px;
  overflow: hidden;
  background: #000000;
}

.screen {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
  background: #000000;
  box-shadow: inset 0 -4px 4px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 260ms ease, opacity 160ms ease;
}

.view.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.view.is-above {
  transform: translateY(-100%);
}

.view.is-below {
  transform: translateY(100%);
}

.side-nav {
  display: grid;
  grid-template-rows: 76px 76px 76px;
  align-content: center;
  justify-items: center;
  gap: 8px;
  width: 78px;
  overflow: visible;
  transform: translateX(-18px);
}

.nav-btn,
.btn,
.seed-card,
.plot,
.inventory-item {
  border-radius: 8px;
  cursor: pointer;
}

.nav-btn {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 8px;
  background: radial-gradient(circle at 48% 12%, var(--green-a) 0%, var(--green-b) 48%, var(--green-c) 100%);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  outline: none;
  transition: transform 160ms ease;
}

.nav-btn::before {
  content: "";
  position: absolute;
  inset: -42%;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, #8fba38 0%, #4f8a38 46%, #182414 78%);
  opacity: 0;
  transform: translate(var(--radial-shift-x), var(--radial-shift-y));
  transition: opacity 150ms ease, transform 240ms ease;
  pointer-events: none;
}

.nav-btn img {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  pointer-events: none;
}

.nav-btn.is-selected {
  transform: scale(1.12);
}

.nav-btn:focus,
.nav-btn:focus-visible,
.nav-btn.is-key-focus {
  outline: none;
}

.nav-btn:focus-visible::before,
.nav-btn.is-key-focus::before {
  opacity: 1;
  transform: translate(0, 0);
}

.nav-btn.is-key-focus.move-right:not(.is-bouncing)::before,
.btn.is-key-focus.move-right:not(.is-bouncing)::before,
.seed-card.is-key-focus.move-right:not(.is-bouncing)::before,
.inventory-item.is-key-focus.move-right:not(.is-bouncing)::before {
  animation: radial-enter-right 240ms ease-out;
}

.nav-btn.is-key-focus.move-left:not(.is-bouncing)::before,
.btn.is-key-focus.move-left:not(.is-bouncing)::before,
.seed-card.is-key-focus.move-left:not(.is-bouncing)::before,
.inventory-item.is-key-focus.move-left:not(.is-bouncing)::before {
  animation: radial-enter-left 240ms ease-out;
}

.nav-btn.is-key-focus.move-down:not(.is-bouncing)::before,
.btn.is-key-focus.move-down:not(.is-bouncing)::before,
.seed-card.is-key-focus.move-down:not(.is-bouncing)::before,
.inventory-item.is-key-focus.move-down:not(.is-bouncing)::before {
  animation: radial-enter-down 240ms ease-out;
}

.nav-btn.is-key-focus.move-up:not(.is-bouncing)::before,
.btn.is-key-focus.move-up:not(.is-bouncing)::before,
.seed-card.is-key-focus.move-up:not(.is-bouncing)::before,
.inventory-item.is-key-focus.move-up:not(.is-bouncing)::before {
  animation: radial-enter-up 240ms ease-out;
}

.nav-btn.is-bouncing::before,
.btn.is-bouncing::before,
.seed-card.is-bouncing::before,
.inventory-item.is-bouncing::before {
  opacity: 1;
}

.nav-btn.is-bouncing.move-right::before,
.btn.is-bouncing.move-right::before,
.seed-card.is-bouncing.move-right::before,
.inventory-item.is-bouncing.move-right::before {
  animation: radial-edge-bounce-right 260ms ease-out;
}

.nav-btn.is-bouncing.move-left::before,
.btn.is-bouncing.move-left::before,
.seed-card.is-bouncing.move-left::before,
.inventory-item.is-bouncing.move-left::before {
  animation: radial-edge-bounce-left 260ms ease-out;
}

.nav-btn.is-bouncing.move-down::before,
.btn.is-bouncing.move-down::before,
.seed-card.is-bouncing.move-down::before,
.inventory-item.is-bouncing.move-down::before {
  animation: radial-edge-bounce-down 260ms ease-out;
}

.nav-btn.is-bouncing.move-up::before,
.btn.is-bouncing.move-up::before,
.seed-card.is-bouncing.move-up::before,
.inventory-item.is-bouncing.move-up::before {
  animation: radial-edge-bounce-up 260ms ease-out;
}

.btn,
.seed-card,
.inventory-item {
  position: relative;
  overflow: hidden;
  background: #34383a;
  box-shadow: none;
  isolation: isolate;
  --hover-a: #5f6668;
  --hover-b: #3f4446;
  --hover-c: #1b1f20;
}

.btn::before,
.seed-card::before,
.inventory-item::before {
  content: "";
  position: absolute;
  inset: -42%;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, var(--hover-a) 0%, var(--hover-b) 46%, var(--hover-c) 78%);
  opacity: 0;
  transform: translate(var(--radial-shift-x), var(--radial-shift-y));
  transition: opacity 150ms ease, transform 240ms ease;
  pointer-events: none;
}

.btn > *,
.seed-card > *,
.inventory-item > * {
  position: relative;
  z-index: 1;
}

.btn:hover,
.btn:focus-visible,
.btn.is-key-focus,
.seed-card:hover,
.seed-card:focus-visible,
.seed-card.is-key-focus,
.inventory-item:hover,
.inventory-item:focus-visible,
.inventory-item.is-key-focus {
  outline: none;
}

.btn:hover::before,
.btn:focus-visible::before,
.btn.is-key-focus::before,
.seed-card:hover::before,
.seed-card:focus-visible::before,
.seed-card.is-key-focus::before,
.inventory-item:hover::before,
.inventory-item:focus-visible::before,
.inventory-item.is-key-focus::before {
  opacity: 1;
  transform: translate(0, 0);
}

.seed-card[disabled]::before,
.seed-card[disabled]:hover::before,
.seed-card[disabled]:focus-visible::before,
.seed-card[disabled].is-key-focus::before {
  opacity: 0;
}

#sellAllBtn {
  background: #3f5c3f;
  --hover-a: #76a05b;
  --hover-b: #4e7342;
  --hover-c: #1f2c22;
}

#sellAllBtn:hover,
#sellAllBtn:focus-visible,
#sellAllBtn.is-key-focus {
  background: #3f5c3f;
}

#expandBtn {
  background: #765a3b;
  --hover-a: #9d6b36;
  --hover-b: #725234;
  --hover-c: #2e261d;
}

#expandBtn:hover,
#expandBtn:focus-visible,
#expandBtn.is-key-focus {
  background: #765a3b;
}

#coinText.is-bouncing {
  animation: coin-bounce 360ms ease-out;
}

.inventory-item:focus-visible,
.inventory-item.is-key-focus,
.seed-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.shop-status,
.farm-status,
.inventory-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  width: var(--farm-4-width);
  min-height: 34px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

#shopView {
  align-items: center;
  position: absolute;
}

#shopView::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 66px;
  z-index: 0;
  width: var(--farm-4-width);
  height: 424px;
  border-radius: 26px;
  background: linear-gradient(to top,
    rgba(35, 22, 13, 0.99) 0%,
    rgba(30, 20, 13, 0.97) 52%,
    rgba(54, 35, 19, 0.7) 82%,
    rgba(54, 35, 19, 0) 100%);
  pointer-events: none;
  transform: translateX(-50%);
}

#shopView > * {
  position: relative;
  z-index: 1;
}

#shopView .shop-status {
  width: var(--farm-4-width);
}

#shopView .shop-status p:last-child {
  margin-left: auto;
  text-align: right;
}

.shop-status p,
.farm-status p,
.inventory-status p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 220px;
  margin: 0;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(27, 29, 31, 0.84);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.38);
  white-space: nowrap;
}

.weather-status-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}

#farmView {
  position: absolute;
}

#farmView::before,
#farmView::after {
  content: "";
  position: absolute;
  inset: 58px 44px 50px 16px;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

#farmView > * {
  position: relative;
  z-index: 1;
}

body[data-weather="rainbow"] #farmView::before {
  left: 36px;
  right: 64px;
  top: 128px;
  bottom: 88px;
  border-radius: 50%;
  background: conic-gradient(from 205deg,
    rgba(255, 92, 92, 0.26),
    rgba(255, 220, 96, 0.22),
    rgba(98, 224, 132, 0.22),
    rgba(94, 174, 255, 0.22),
    rgba(198, 118, 255, 0.2),
    rgba(255, 92, 92, 0.26));
  filter: blur(20px);
  opacity: 0.85;
  transform: scale(0.88);
}

body[data-weather="rain"] .plot {
  background:
    radial-gradient(circle at 50% 16%, rgba(88, 76, 64, 0.88) 0%, rgba(47, 34, 24, 0.98) 100%);
  box-shadow:
    inset 0 -5px 5px rgba(17, 12, 8, 0.9),
    inset 0 2px 8px rgba(65, 92, 105, 0.24);
}

.farm-grid .farm-rain {
  position: absolute;
  inset: -24px -18px -8px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

body[data-weather="rain"] .farm-rain {
  opacity: 1;
}

.rain-drop {
  --drop-x: 50%;
  --drop-y: 50%;
  --drop-delay: 0ms;
  position: absolute;
  display: block;
  left: var(--drop-x);
  top: var(--drop-y);
  z-index: 2;
  width: 2px;
  height: 16px;
  opacity: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 4px rgba(147, 203, 236, 0.32));
}

.rain-drop::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 2px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.98),
    rgba(158, 204, 237, 0.94) 58%,
    rgba(60, 91, 116, 0.72));
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.48);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.62));
  transform: translate(-50%, -102px) scaleY(1.1);
  animation: raindrop-fall 300ms var(--drop-delay) cubic-bezier(0.32, 0.58, 0.38, 1) infinite;
}

.rain-drop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 1%;
  border: 1px solid rgba(178, 220, 242, 0.7);
  border-top: 0;
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%) scale(0.35);
  animation: raindrop-splash 1100ms var(--drop-delay) ease-out infinite;
}

.drop-a {
  --drop-delay: 0ms;
}

.drop-b {
  --drop-delay: 360ms;
}

.drop-c {
  --drop-delay: 720ms;
}

body[data-weather="night"] #farmView::after {
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 235, 126, 0.95) 0 2px, rgba(255, 235, 126, 0) 7px),
    radial-gradient(circle at 72% 34%, rgba(183, 255, 164, 0.88) 0 2px, rgba(183, 255, 164, 0) 8px),
    radial-gradient(circle at 38% 72%, rgba(255, 235, 126, 0.72) 0 2px, rgba(255, 235, 126, 0) 7px),
    radial-gradient(circle at 84% 70%, rgba(183, 255, 164, 0.78) 0 2px, rgba(183, 255, 164, 0) 8px);
  opacity: 0.72;
  animation: fireflies 4.8s ease-in-out infinite alternate;
}

body[data-weather="night"] .screen {
  background: radial-gradient(circle at 50% 36%, rgba(19, 29, 37, 0.86), #000000 76%);
}

.shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: var(--store-control-width);
  margin: 4px 0 14px;
}

.btn-small {
  height: 54px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.shop-list {
  display: grid;
  gap: 10px;
  width: var(--store-control-width);
}

.seed-card {
  position: relative;
  width: var(--store-control-width);
  height: 100px;
  padding: 12px;
  text-align: left;
}

.seed-card[disabled] {
  color: rgba(255, 255, 255, 0.38);
  cursor: default;
  filter: grayscale(0.45);
}

.btn[aria-disabled="true"] {
  color: rgba(255, 255, 255, 0.48);
  cursor: default;
}

.seed-card .tier {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 74px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.seed-card .price {
  position: absolute;
  right: 12px;
  bottom: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.seed-card .crop-name {
  position: absolute;
  top: 14px;
  left: 12px;
  font-size: 22px;
  font-weight: 700;
}

.seed-card .stock {
  position: absolute;
  left: 12px;
  bottom: 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.tier-common {
  background: var(--tier-common);
}

.tier-uncommon {
  background: var(--tier-uncommon);
}

.tier-rare {
  background: var(--tier-rare);
}

.tier-epic {
  background: var(--tier-epic);
}

.farm-grid {
  --farm-cols: 2;
  --farm-cell: 96px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--farm-cols), var(--farm-cell));
  grid-auto-rows: var(--farm-cell);
  gap: 10px;
  width: calc((var(--farm-cols) * var(--farm-cell)) + ((var(--farm-cols) - 1) * 10px));
  height: calc((var(--farm-cols) * var(--farm-cell)) + ((var(--farm-cols) - 1) * 10px));
  margin: auto;
  transition: width 260ms ease, height 260ms ease;
  overflow: visible;
}

.farm-grid.is-expanding {
  animation: farm-expand 360ms ease;
}

.farm-grid.is-compact .plot-meta {
  font-size: 10px;
}

.farm-grid.is-compact .plot-meta.top {
  top: -28px;
  min-width: 44px;
  max-width: 72px;
  padding: 4px 6px;
}

.farm-grid.is-compact .plant-cluster {
  inset: -10px -7px 2px;
}

.plot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  background: radial-gradient(circle at 50% 18%, var(--soil-top) 0%, var(--soil-bottom) 100%);
  box-shadow: inset 0 -4px 4px #291c12;
}

.plot::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: 7;
  border: 3px solid #ffffff;
  border-radius: 11px;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.plot.is-locked {
  background: var(--soil-locked);
  cursor: default;
}

.plot:hover,
.plot:focus-visible,
.plot.is-key-focus,
.plot.is-hovered {
  outline: none;
}

.plot:hover::after,
.plot:focus-visible::after,
.plot.is-key-focus::after {
  opacity: 1;
}

.plant-cluster {
  position: absolute;
  inset: -14px -8px 2px;
  z-index: 4;
  transform-origin: 50% 100%;
  pointer-events: none;
}

.plot.is-leaving.move-right .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-right 280ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plot.is-leaving.move-left .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-left 280ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plot.is-leaving.move-up .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-up 280ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plot.is-leaving.move-down .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-down 280ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plot:not(.is-leaving).move-right .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-right 300ms 85ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plot:not(.is-leaving).move-left .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-left 300ms 85ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plot:not(.is-leaving).move-up .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-up 300ms 85ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plot:not(.is-leaving).move-down .plant-cluster:not([data-stage="seed"]) {
  animation: plant-bend-down 300ms 85ms cubic-bezier(0.2, 0.8, 0.25, 1.25);
}

.plant-visual {
  --growth-scale: 1;
  --plant-delay: 0s;
  position: relative;
  display: grid;
  place-items: center;
  width: 88%;
  height: 88%;
  transform-origin: 50% 100%;
  transform: scaleY(var(--growth-scale));
}

.plant-cluster .plant-visual {
  position: absolute;
  width: 72%;
  height: 72%;
}

.plant-cluster .plant-top-left {
  left: -3%;
  top: -10%;
}

.plant-cluster .plant-top-right {
  right: -3%;
  top: -10%;
}

.plant-cluster .plant-bottom {
  left: 14%;
  bottom: -1%;
}

.plant-cluster.is-single .plant-bottom {
  left: 14%;
  right: auto;
  bottom: -1%;
  width: 76%;
  height: 76%;
}

.plant-visual.is-placing {
  animation: plant-place 180ms ease-out both;
}

.plant-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 1;
  filter: none;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.plant-visual.stage-seed {
  width: 68%;
  height: 68%;
  transform-origin: 50% 50%;
}

.plant-cluster .plant-visual.stage-seed {
  width: 46%;
  height: 46%;
}

.plant-cluster .plant-top-left.stage-seed {
  left: 20%;
  top: 30%;
}

.plant-cluster .plant-top-right.stage-seed {
  right: 20%;
  top: 30%;
}

.plant-cluster .plant-bottom.stage-seed {
  left: 27%;
  bottom: 16%;
}

.plant-visual.stage-sprout {
  transform: translateY(-8px) scaleY(var(--growth-scale));
}

.plant-visual.stage-bud {
  transform: translateY(-12px) scaleY(var(--growth-scale));
}

.plant-visual.stage-bloom {
  transform: translateY(-16px) scaleY(var(--growth-scale));
}

.plant-visual.stage-seed .plant-image {
  transform-origin: 50% 50%;
}

.plant-visual.stage-sprout:not(.crop-lotus) .plant-image {
  animation: sprout-sway 4.8s ease-in-out infinite;
  animation-delay: var(--plant-delay);
}

.plant-visual.stage-bud:not(.crop-lotus) .plant-image {
  animation: bud-sway 4.2s ease-in-out infinite;
  animation-delay: var(--plant-delay);
}

.plant-visual.stage-bloom:not(.crop-lotus) .plant-image {
  animation: bloom-sway 3.8s ease-in-out infinite;
  animation-delay: var(--plant-delay);
}

.plant-visual.is-preparing-stage {
  animation: stage-stretch 420ms ease-in-out infinite alternate;
}

.plant-cluster.is-harvesting {
  animation: harvest-rise 240ms ease-out forwards;
}

.sparkle-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 9;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #fffbea 0%, #ffe66d 42%, #f0b735 100%);
  clip-path: polygon(50% 0%, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0% 50%, 39% 36%);
  filter: drop-shadow(0 0 9px rgba(255, 242, 168, 0.95));
  animation: sparkle-pop 320ms ease-out forwards;
  transform: rotate(var(--spark-angle)) translateX(0);
}

.plant {
  width: 52%;
  height: 52%;
  border-radius: 7px;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.34);
}

.plant.daisy { background: #f3e978; }
.plant.tulip { background: #e85656; }
.plant.poppy { background: #c94232; }
.plant.iris { background: #7357d8; }
.plant.lotus { background: #e883ba; }

.plot-meta {
  position: absolute;
  left: 5px;
  right: 5px;
  z-index: 8;
  opacity: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.plot-meta.top {
  top: -34px;
  left: 50%;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  min-width: 54px;
  max-width: 92px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(68, 72, 74, 0.88);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
}

.plot-meta.top.has-fast-icon {
  max-width: 104px;
  padding-right: 6px;
}

.fast-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  flex: 0 0 auto;
}

.plot-meta.bottom { bottom: 7px; }

.plot:hover .plot-meta,
.plot:focus-visible .plot-meta,
.plot.is-key-focus .plot-meta {
  opacity: 1;
}

.inventory-view {
  position: relative;
  align-items: center;
  padding-right: 18px;
  padding-left: 32px;
}

.inventory-view .inventory-status {
  width: var(--farm-4-width);
}

.inventory-view .inventory-status p:last-child {
  margin-left: auto;
  text-align: right;
}

.inventory-view::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: var(--farm-4-width);
  height: 86px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.88) 34%,
    rgba(0, 0, 0, 0.42) 68%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 4;
}

.inventory-scroll {
  position: relative;
  direction: ltr;
  flex: 1;
  width: var(--farm-4-width);
  max-width: var(--farm-4-width);
  overflow-y: auto;
  min-height: 0;
  padding: 52px 20px 30px;
  border-radius: 26px;
  background: linear-gradient(to bottom,
    rgba(16, 18, 22, 0.98) 0%,
    rgba(16, 18, 22, 0.96) 55%,
    rgba(16, 18, 22, 0.58) 82%,
    rgba(16, 18, 22, 0) 100%);
  scrollbar-width: none;
}

.inventory-scroll::-webkit-scrollbar {
  display: none;
}

.inventory-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 112px);
  gap: 12px;
  align-content: start;
  justify-content: center;
  padding-bottom: 24px;
}

.inventory-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 112px;
  height: 104px;
  padding: 10px;
  text-align: left;
}

.inventory-scrollbar {
  --thumb-top: 0px;
  --thumb-height: 48px;
  position: absolute;
  left: 18px;
  top: 50%;
  width: 8px;
  height: 96px;
  border-radius: 999px;
  background: #2f333b;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 220ms ease;
  z-index: 8;
}

.inventory-scrollbar.is-visible {
  opacity: 1;
}

.inventory-scrollbar span {
  position: absolute;
  left: 0;
  top: var(--thumb-top);
  width: 8px;
  height: var(--thumb-height);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  transition: top 160ms ease, height 160ms ease;
}

.inventory-scrollbar.is-at-start span,
.inventory-scrollbar.is-at-end span {
  height: 32px;
}

.inventory-item.seed {
  background: #3d4834;
  --hover-a: #6f8951;
  --hover-b: #42583a;
  --hover-c: #182014;
}

.inventory-item.tier-common {
  background: #3a3e40;
  --hover-a: #7b7f81;
  --hover-b: #3e4244;
  --hover-c: #171a1b;
}

.inventory-item.tier-uncommon {
  background: #29402a;
  --hover-a: #628c45;
  --hover-b: #294a2e;
  --hover-c: #121b14;
}

.inventory-item.tier-rare {
  background: #24384f;
  --hover-a: #527ea7;
  --hover-b: #253f63;
  --hover-c: #111722;
}

.inventory-item.tier-epic {
  background: #3f2a53;
  --hover-a: #8b62b6;
  --hover-b: #49315f;
  --hover-c: #1b1324;
}

.inventory-item.is-gold {
  background: #6a5117;
  --hover-a: #f1cf55;
  --hover-b: #8b681b;
  --hover-c: #2f2309;
  color: #fff7cc;
}

.inventory-item.is-gold .item-meta {
  color: #ffe58a;
}

.inventory-item .item-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.05;
}

.inventory-item .item-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.12;
}

.empty-state {
  grid-column: 1 / -1;
  align-self: center;
  margin: 130px 0 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

@keyframes farm-expand {
  0% {
    transform: scale(0.92);
  }
  62% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes plant-place {
  0% {
    opacity: 0;
    transform: translateY(7px) scaleY(0.72) scaleX(1.08);
  }
  70% {
    opacity: 1;
    transform: translateY(-1px) scaleY(1.04) scaleX(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sprout-sway {
  0%, 100% {
    transform: rotate(-0.8deg) translateX(-0.2px);
  }
  50% {
    transform: rotate(0.8deg) translateX(0.2px);
  }
}

@keyframes bud-sway {
  0%, 100% {
    transform: rotate(-1.6deg) translateX(-0.6px);
  }
  50% {
    transform: rotate(1.6deg) translateX(0.6px);
  }
}

@keyframes bloom-sway {
  0%, 100% {
    transform: rotate(-3deg) translateX(-1px);
  }
  50% {
    transform: rotate(3deg) translateX(1px);
  }
}

@keyframes stage-stretch {
  0% {
    transform: translateY(-7px) scaleY(calc(var(--growth-scale) + 0.015)) scaleX(0.995);
  }
  100% {
    transform: translateY(-11px) scaleY(calc(var(--growth-scale) + 0.085)) scaleX(0.965);
  }
}

@keyframes plant-bend-right {
  0% { transform: rotate(0deg); }
  46% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes plant-bend-left {
  0% { transform: rotate(0deg); }
  46% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes plant-bend-up {
  0% { transform: scaleY(1) scaleX(1); }
  46% { transform: scaleY(1.08) scaleX(0.96); }
  100% { transform: scaleY(1) scaleX(1); }
}

@keyframes plant-bend-down {
  0% { transform: scaleY(1) scaleX(1); }
  46% { transform: scaleY(0.92) scaleX(1.04); }
  100% { transform: scaleY(1) scaleX(1); }
}

@keyframes harvest-rise {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-42px) scale(1);
  }
}

@keyframes sparkle-pop {
  0% {
    opacity: 1;
    transform: rotate(var(--spark-angle)) translateX(0) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(0.15);
  }
}

@keyframes coin-bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-7px) scale(1.12);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes radial-edge-bounce-right {
  0% { transform: translate(0, 0); }
  45% { transform: translate(16%, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes radial-enter-right {
  0% { transform: translate(-24%, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes radial-enter-left {
  0% { transform: translate(24%, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes radial-enter-down {
  0% { transform: translate(0, -24%); }
  100% { transform: translate(0, 0); }
}

@keyframes radial-enter-up {
  0% { transform: translate(0, 24%); }
  100% { transform: translate(0, 0); }
}

@keyframes raindrop-fall {
  0% {
    opacity: 0;
    transform: translate(-50%, -104px) scaleY(1.12);
  }
  12% {
    opacity: 0.92;
    transform: translate(-50%, -88px) scaleY(1.12);
  }
  76% {
    opacity: 0.92;
    transform: translate(-50%, -3px) scaleY(1.06);
  }
  82% {
    opacity: 0;
    transform: translate(-50%, 0) scaleY(0.32) scaleX(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scaleY(0.32) scaleX(1.5);
  }
}

@keyframes raindrop-splash {
  0%, 76% {
    opacity: 0;
    transform: translateX(-50%) scale(0.28);
  }
  84% {
    opacity: 0.55;
    transform: translateX(-50%) scale(0.88);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.22);
  }
}

@keyframes fireflies {
  0% {
    filter: drop-shadow(0 0 2px rgba(255, 239, 149, 0.45));
    transform: translate3d(-4px, 2px, 0);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(217, 255, 151, 0.58));
  }
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 239, 149, 0.5));
    transform: translate3d(5px, -5px, 0);
  }
}

@keyframes radial-edge-bounce-left {
  0% { transform: translate(0, 0); }
  45% { transform: translate(-16%, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes radial-edge-bounce-down {
  0% { transform: translate(0, 0); }
  45% { transform: translate(0, 16%); }
  100% { transform: translate(0, 0); }
}

@keyframes radial-edge-bounce-up {
  0% { transform: translate(0, 0); }
  45% { transform: translate(0, -16%); }
  100% { transform: translate(0, 0); }
}