.farm-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.farm-beds {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.farm-grid {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  background-color: #8B4513;
  padding: 20rpx;
  border-radius: 10rpx;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(173, 216, 230, 0.3);
    border-radius: 10rpx;
    pointer-events: none;
  }

  .row {
    display: flex;
    justify-content: center;
    gap: 10rpx;
    
    &.row-1, &.row-3 {
      padding: 0 60rpx;
    }
  }
}

.farm-plot {
  flex: 1;
  aspect-ratio: 1;
  max-width: 120rpx;
  background-color: #654321;
  border-radius: 8rpx;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;

  &.is-locked {
    background-color: #333333;
    &::after {
      content: '🔒';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24rpx;
    }
  }

  &.is-empty {
    background-color: #8B4513;
  }

  &.is-growing {
    background-color: #556B2F;
  }

  &.is-harvestable {
    background-color: #228B22;
  }

  &.highlight-empty {
    animation: pulse 1s infinite;
    border: 2rpx solid #FFD700;
  }

  &.highlight-harvestable {
    animation: pulse 1s infinite;
    border: 2rpx solid #FFD700;
  }

  .plot-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &.needs-water::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 255, 0.2);
      border-radius: 8rpx;
    }

    &.has-weeds::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('/static/weeds.png') center/cover;
      opacity: 0.5;
      border-radius: 8rpx;
    }
  }

  .plot-state-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 20rpx;
    padding: 2rpx 0;
    text-align: center;
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
    transition: all 0.3s;
    
    &.state-changed {
      animation: stateChange 0.3s ease-in-out;
    }
  }

  .crop-stage {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;

    .crop-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10rpx rgba(255, 215, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

@keyframes stateChange {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.action-panel {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10rpx;
  position: relative;

  .farm-state-indicator {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10rpx 20rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    font-size: 24rpx;
    margin-bottom: 10rpx;
    transition: all 0.3s;
    
    &.state-changed {
      animation: stateChange 0.3s ease-in-out;
    }
  }

  .action-buttons {
    display: flex;
    gap: 10rpx;
    justify-content: space-around;

    button {
      flex: 1;
      min-width: 160rpx;
      padding: 15rpx 30rpx;
      border: none;
      border-radius: 5rpx;
      background-color: #4CAF50;
      color: white;
      font-size: 28rpx;
      transition: all 0.2s;

      &:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }

  .selected-plot-info {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    padding: 10rpx;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 5rpx;

    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}